We have been waiting for it for a long time, it is now a reality: Bootstrap 3 (BS3) RC1 was released July 27th.
BS3 is “mobile first” (which was also if I recall correctly the Foundation 4 motto at the time of the release: March 2013… What can be more trending than this?!). While Bootstrap 2 (BS2), has optional mobile friendly styles, Bootstrap 3, is mobile friendly from the start (More explanation in the Scaffolding section).
Apart from the design that is more or less trivial to talk about (It is different, and largely inspired from the FLAT trend: FlatUI), I would say that BS3 is better (New components and improved old ones) and cleaner (The markup semantic has been reviewed and improved : deletion of .button-inverse or .label-inverse for example.) than BS2.
if you want to learn more about BS2 instead you can read two of my previous post: Introduction to Twitter’s Bootstrap PPT and 3 awesome CSS Frameworks
In this post I will go through the most important changes that BS3 introduces divided in three sections : Scaffolding, CSS and Components
With over ~1,600 commits, ~72,000 additions/deletions, and ~300 files changed, everything has changed. We’ve added features, removed features, and cleaned up a lot more. The v3 pull request on GitHub has all the details you’ll need for a complete list of changes and some helpful migration tips.
@mdo and @fat
Scaffolding
Bootstrap is built on responsive 12-column grids.
A lot of things happened in the “old” scaffolding section with BS3. As it is “mobile first” instead of adding on optional mobile styles (like it used to in BS2), they’re baked right into the core.
Grid SystemModified
The grid system has changed a lot. With BS2 you could create a basic grid system that starts out stacked on mobile before becoming horizontal on desktop and tablet devices. With BS3 you have more freedom on how you want your grid to act on diverse screens.
New CSS classes appeared to help us: col-lg-* for large screens (Desktop),col-md-* for normal screens (Desktop), col-sm-* for small screens (Tablet) and col-xs-* for Mobile screens.
.container-fluid and .row-fluid were removed.BS2 BS3 .span* .col-xs*
.col-sm-*
.col-md-*
.col-lg-*.container-fluid .row-fluid Class changes between BS2 and BS3
Example 1: Grid stacked on Mobile and Tablet but horizontal on Desktop(normal and large)
<div class="row"> <div class="col-md-6 col-lg-6">6</div> <div class="col-md-6 col-lg-6">6</div> </div>
Example 2: Grid stacked on Tablet but horizontal on Mobile and Desktop(normal and large)
<div class="row"> <div class="col-xs-6 col-md-6 col-lg-6">6</div> <div class="col-xs-6 col-md-6 col-lg-6">6</div> </div>
Example 3: Grid horizontal on Mobile, Tablet and Desktop
<div class="row"> <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">6</div> <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">6</div> </div>
Responsive designModified
Responsive images
Images in BS2 were automatically made responsive-friendly (if using bootstrap-responsive.css) which created some conflicts with services such as Google Maps. Images in BS3 can be made responsive-friendly via the addition of the .img-responsive class. This applies max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element.
Responsive utilities
For faster mobile-friendly development, BS2 and BS3 provide utility classes for showing and hiding content by device. Beside you can see the changes made between the two versions.
BS2 BS3 .visible-phone .visible-xs .visible-tablet .visible-sm .visible-desktop .visible-md .visible-lg .hidden-phone .hidden-xs .hidden-tablet .hidden-sm .hidden-desktop .hidden-md .hidden-lg Class changes between BS2 and BS3
CSS
Global CSS settings, fundamental HTML elements styled and enhanced with extensible classes.
TypographyModified
The heading, list and text classes were cleaned up to have more consistent names (for example .muted changed to .text-muted to match the other contextual text colors: .text-info, .text-success etc.).
BS2 BS3 ul.unstyled .list-unstyled ul.inline .list-inline .muted .text-muted .h1, .h2, .h3 etc. Class changes between BS2 and BS3
TableModified
In order to avoid conflicts with third party code, BS3 do not style tables by default. For basic table style you will need to add the base class .table to any <table>.
BS3 introduces a new contextual table class: .active which highlight the row the same way you could do it by being hover it with your mouse (if using the .table-hover class).
BS2 BS3 .active Class changes between BS2 and BS3
FormsModified
BS3 does not use .input-prepend and .input-append but .input-group instead. The classes have changed for the elements within, and require a bit more markup to use buttons.
Horizontal forms are now mobile-first, meaning that for screens <768px, elements are stacked. Above that, elements are floated and appear side-by-side.
<input>, <textarea>, and <select> elements with .form-control are set to width: 100%; by default.Height sizing
Using the old classes .input-small and .input-large you now can change the height of any form controls (that match button sizes).
BS2 BS3 .radio.inline .radio-inline .form-group .inline-help .help-inline .uneditable-input .form-search .input-block-level .controls-row .input-prepend .input-append Class changes between BS2 and BS3
ButtonsModified
Buttons style have been simplified: no more outer box-shadow by default, no more gradient or text shadow.
.btn-default class.BS2 BS3 .btn-mini .btn-xs .btn-small .btn-sm .btn-large .btn-lg .btn-default .btn-inverse Class changes between BS2 and BS3
ImagesModified
BS3 consolidates image thumbnail styles in disfavor of .img-polaroid that disappears.
.img-responsive class.BS2 BS3 .img-polaroid .img-thumbnail
(for regular inline(-block) images)Class changes between BS2 and BS3
IconsRemoved
Glyphicons as you know them in BS2 have changed. First of all Glyphicons are not included in the BS3 package. It has its own separate repository. Second of all Glyphicons (v1.7) is now using @font-face instead of old PNGs.
This changes keeps the primary project as lean as possible, makes it easier for folks to swap icon libraries (such as Font Awesome), and makes Glyphicons available to more people outside Bootstrap.
Components
Dozens of reusable components built to provide iconography, dropdowns, navigation, alerts, popovers, and much more.
Dropdown menusModified
Dropdown menus introduces dropdown headers. It adds a header to any dropdown menu as you can see on the screenshot beside.
BS2 BS3 .dropdown-header Class changes between BS2 and BS3
ButtonsModified
BS3 introduces the .btn-group-justified class that makes a group of buttons stretch at the same size to span the entire width of its parent.
BS2 BS3 .btn-group-justified Class changes between BS2 and BS3
AlertsModified
<hr> elements within any .alert component will now be styled to match the border color of the alert. Immediate children links within default alerts, and within paragraph text, are now styled for improved readability. Links are automatically bolded and appear as a slightly darker color than the alert text.
NavsModified
The nav option: .nav-list has been removed and is now replaced by the new List group component (See the List group section below). BS3 also removes the ability to have tabs on the left, on the right, or at the bottom.
BS2 BS3 .nav-list .tabs-left .tabs-right .tabs-below Class changes between BS2 and BS3
NavbarModified
Overhaul styles of default navbar and its sub-components. For example the height of the navbar increased from 44px to 62px for mobile devices, and 50px for desktops and there is no more box-shadow or gradients on the navbars.
BS2 BS3 .navbar > .nav .navbar-nav .btn-navbar .navbar-toggle .brand .navbar-brand .navbar-search .divider-vertical .navbar-inner Class changes between BS2 and BS3
List groupNew
BS3 introduces a new component: the list group. It creates simple and complex series of components. Perfect for more complex implementations like email inboxes, or simple ones like a list of options.
Basic list group
Basically what we had in BS2 with the .nav-list class.
<ul class="list-group"> <li class="list-group-item">Cras justo odio</li> <li class="list-group-item">Dapibus ac facilisis in</li> <li class="list-group-item">Morbi leo risus</li> </ul>
Linked list group
Linkify list group items by using anchor tags instead of list items (that also means a parent <div> instead of an <ul>). No need for individual parents around each element.
<div class="list-group"> <a href="#" class="list-group-item active">Cras justo odio</a> <a href="#" class="list-group-item">Dapibus ac facilisis in </a> <a href="#" class="list-group-item">Morbi leo risus </a> </div>
Custom content
Allow you to add nearly any HTML within .list-group-item item.
<div class="list-group"> <a href="#" class="list-group-item active"> <h4 class="list-group-item-heading">List group item heading</h4> <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus.</p> </a> <a href="#" class="list-group-item"> <h4 class="list-group-item-heading">List group item heading</h4> <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus.</p> </a> </div>
BadgesModified
Badges are basically the same in BS2 and BS3. Though they adapt better to different components (such as List group: See the “Basic list group” example above) and have a special style when the parent has the .active states
Typographic componentsModified
BS3 has a lighter font-weight for headings (.page-header) than BS2. font-weight: 500; VS font-weight: bold;
BS2 BS3 .hero-unit .jumbotron Class changes between BS2 and BS3
Progress barsModified
BS3 new structure is now .progress on the outer <div> and .progress-bar on the inner <div> (See example below).
<div class="progress"> <div class="progress-bar"></div> </div>
Instead of placing modifier classes on the parent, they are placed directly on the bars (e.g., .progress-bar-info) in addition to the required .progress-bar class.
BS2 BS3 .bar .progress-bar .progress-info .progress-bar-info .progress-success .progress-bar-success .progress-warning .progress-bar-warning .progress-danger .progress-bar-danger Class changes between BS2 and BS3
PanelsNew
The need of creating boxes (with optional header and footer) is something BS2 missed. I am happy to say that BS3 rectified this mistake by creating a new component: the panel.
Panel with heading
Easily add a heading container to your panel with .panel-heading. You may also include any <h1>–<h6> with a .panel-title class to add a pre-styled heading.
<div class="panel"> <div class="panel-heading"> <h3 class="panel-title">Panel title</h3> </div> Panel content </div>
Panel with footer
Wrap buttons or secondary text in .panel-footer.
<div class="panel"> Panel content <div class="panel-footer">Panel footer</div> </div>
Contextual alternatives
Like other components, BS3 allow us to make a panel more meaningful to a particular context by adding any of the contextual state (success, warning, danger, and info) classes.
<div class="panel panel-success"> <div class="panel-heading"> <h3 class="panel-title">Panel title</h3> </div> Panel content </div>
If I missed anything please let me know by commenting or on Twitter, and I will update 