New features and changes of Bootstrap version 3

15 April 2014

Major changes

. Dropped IE7 and FF3.6 support.

. Standard and responsive CSS combined into a single file.

. Renamed Variables: Rename variables to use dashes instead of camelCase. For example, it's now @body-bg instead of @bodyBackground

. No more @blue, @orange, instead its @brand-primary, @brand-success, and others. These are then assigned on a per-component basis (e.g., @state-warning-text, @btn-background-primary, etc)

. Add retina image mixin with .img-retina()

. New variables added like:- Change @component-active-bg and customize the active states of nav pills, dropdowns, and more.

. Overhaul grid systems to make it fluid and mobile-first.

.Removed separate fluid grid system, container, and layout

. New single grid system uses .row (percentages not pixels), (padding over margin), and box-sizing: border-box, now. Offsets are still 100% supported.

. Instead of .span and .offset, we're now using .col- and .col-offset-, respectively.

. Use .col- classes for tiny devices (smartphones). And use .col-sm- classes for small devices (tablets)

. Added .col-push- and .col-pull- modifier classes for easy column source ordering.

. Removed dedicated table grid classes.

. Use of "max-width" instead of "width" on all .container instances is recommended to help prevent some issues with containers in components like navbars.


. The default gray button requires two classes—class="btn btn-default".

. Dropped .btn-inverse


. Removed input-prepend and input-append for singular .input-group

. Dropped .form-search

. Horizontal forms are now mobile-first, meaning at less than 768px, elements are stacked. Above that, elements are floated and appear side-by-side.

. Checkboxes and radios now require an extra additional step to setup. Instead of .radio.inline, you now need a single class, .radio-inline, for direct use


. Convert to Glyphicons v1.7 @font-face and drop the old PNGs.

. All classes start with .glyphicon- instead of .icon-


. Refactor labels to scale with their parent's font-size

. Dropped the .label-inverse

. Hero Unit changed to Jumbotron, Class changed from .hero-unit to .jumbotron

. Lighter font-weight for headings

. Scale font-size in responsive views.

Navs and Navbars

. Removed .nav-list option. Replaced by the new .list-group component.

. Drop support for .navbar-search

. Overhaul styles of default navbar and its sub-components:

. Dropdown menu carets (those attached to the actual menu, not the indicators) have been removed so that dropdown menus sit flat against the edge of the navbar.

. Navbar vertical dividers have been brought in a smidge, meaning they do not extend the full height of the navbar.

. No more box-shadow or gradients on the navbars.

. Height of navbar has increased from 44px to 62px for mobile devices, and 50px for desktops.

. Removed .navbar-inner and moved relevant styles to .navbar

. Changed .navbar > .nav to .navbar-nav

. Change .btn-navbar to .navbar-toggle

. Changed .brand to .navbar-brand


. Removed submenus suport in dropdown menus.

. Removed .nav-header and replaced with .dropdown-header


. No longer require use of .hide

. Reintroduces .modal-open on the body (so we can nuke the scroll there)

. Adds a couple extra levels of markup (namely .modal-dialog and .modal-content) so we can scroll the entire modal rather than overflow a section within the modal.

. Related, .modal is now the wrapper, and .modal-content is the modal itself. This is so we can still use position: fixed;, but make the modal relatively positioned so that scrolling moves the entire modal, not something with it.

. Added a .modal-title for more consistent and useful targeting of the heading content (previously this was just an and selector performance wise that sucked).


. Redesigned Lighter styles for the previous and next controls, as well as the carousel captions.

. Updated required markup for carousel controls. The .carousel-control class now requires another element within it for the previous/next characters. Those characters are now Glyhpicons icons for improved styling and positioning across browsers and devices. Indicators are now bottom-middle aligned.

. Captions are reinforced as optional and, by default, are hidden on mobile views, then shown for >768px viewports.


Bootstrap 3 changes

comments powered by Disqus