What's New in Bootstrap 3


Bootstrap 3 is a major overhaul, and there are a lot of changes from Bootstrap 2.x. This guidance is intended to help 2.x developers transition to 3.

What's New | Migration from 2.x | 3.0 Change List | Examples

× New! Bootstrap 3 Upgrade Tool - Helps you to convert Bootstrap 2.x HTML to 3.0

Everything has changed. In case you haven't been following the Bootstrap 3 work-in-progress, let's start with a quick summary of what's changed for 3. For starters, the 2.x grid has been completely rethought in an effort to acheive "mobile first". From Bootstrap 2.3.2 to 3.0 RC 1 there were over 1,600 commits, 72,000 additions/deletions and 300 changed files.

Mobile First

"Mobile first" is a responsive Web design practice that prioritizes consideration of smart phones and mobile devices when creating Web pages. For Bootstrap 3, there is no longer a separate bootstrap-responsive.css file. All responsive features are now compiled into a single core bootstrap.css file. Bootstrap 3 allows Web page elements (text, images, buttons, paragraphs, etc..) to scale accordingly as the viewing area, size and resolution changes from wide-screen desktop to tablet to small screen smartphone. Mobile-first elimates to need to make separate desktop and mobile versions of your Web site.

The New Grid

The more powerful (and 100% fluid) Bootstrap 3 grid now comes in 4 sizes (or "breakpoints"). Tiny (for smartphones .col-xs-*), Small (for tablets .col-sm-*), Medium (for laptops .col-md-*) and Large (for laptops/desktops .col-lg-*). The 3 grid sizes enable you to control grid behavior on different devices (desktop, laptops, tablet, smartphone, etc..).


Large (>1200px)

Medium (>992px)

Small (>768px)

Tiny (<768px)


Unlike 2.x, Bootstrap 3 does not provide a fixed (pixel-based) grid. While a fixed-width layout can still be acheived using a simple custom wrapper, there is now only one percentage-based (fluid) grid. The .container and .row classes are now fluid by default, so don't use .row-fluid or .container-fluid anymore in your 3.x markup. Also, the grid gutter (spacing between the columns) is done using padding instead of margins.

Lightweight

Unlike 2.x, all CSS classes for Bootstrap 3 are contained in a single file. The CSS has been optimized for performance. It's about 79KB (minified). In CSS terms, the new Bootstrap 3 allows for simpler customization by improving on inheritance and specificity. You don't need to understand the forementioned, but realize that Bootstrap 3 does require more markup in your HTML. In the end, it will mean less customization and CSS overrides to acheive what you want. Also, the icons (glyphicons) are now contained in a separate css file.


Migration from Bootstrap 2.x


Grid Migration

For starters .span* is history, and has been replaced by .col-md-*.

How to convert from a 2.x to 3.0 grid without any responsive changes.

  • replace .container-fluid with .container.
  • replace .row-fluid with .row.
  • replace .span* with .col-md-*
  • While the Bootstrap 3 large grid (.col-md-*) is similar to the 2.x (.span) grid, and doesn't utilize the new responsive improvements in Bootstrap 3. If you want to get more responsive use the new .col-xs-* (tiny), .col-sm-* (small), and .col-lg-* (large) classes for better scaling on smartphones and tablets.

    In Bootstrap 2.x, any span* columns would stack vertically (switch to 100% width) when viewed on tablets and smartphones.

    Now you can use the 3 different grid sizes to eliminate the vertical stack on smaller devices!

    If you don't mind re-thinking your layout to achieve an improved responsive design consider the 4 new grid sizes. To take advantage of mobile-first (and eliminate the vertical stacking of elements), consider first how your site renders at smaller widths. On which type of devices does the vertical stacking work best? Could the layout be improved for tablets and smartphones?

    To maintain fluid widths on desktops & tablets, but stack vertically on smartphones:
    Replace .span* with .col-sm-*

    To maintain fluid widths on all devices (no stacking):
    Replace .span* with .col-xs-*


    Combining the Grid Sizes
    To control the grid behavior and breakpoints on different devices you can combine the large, small or tiny grid sizes. Use combinations of .col-xs-*, .col-sm-* and .col-lg-* to manipulate the horizontal and vertical display of elements on multiple devices.

    For example, this will enable the layout to use 2 columns (50%) on desktops, and then switch to a single row of 25% width columns on tablets..

      
        <div class="row">
            <div class="col-md-6 col-sm-3"> </div>
            <div class="col-md-6 col-sm-3"> </div>
            <div class="col-md-6 col-sm-3"> </div>
            <div class="col-md-6 col-sm-3"> </div>
        </div>
        

    Navbar Migration

    The .navbar has changed for 3: .navbar-inner is gone. The .brand is now .navbar-brand, and .navbar-nav is used to define links.

    How to convert from a 2.x to 3.0 navbar

  • remove .navbar-inner
  • replace .brand with .navbar-brand
  • wrap .navbar-brand and .navbar-toggle inside .navbar-header
  • add .navbar-nav to .nav
  • Bootstrap 3 Navbar Example Demo
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">Bootply</a>
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>
      <div class="navbar-header navbar-right">
      	<p class="navbar-text">
      	<a href="#" class="navbar-link">Username</a>
      	</p>
      </div>
      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </div>
    </nav>


    Modal Migration

    How to convert from a 2.x to 3.0 modal

  • remove .hide from the .modal (it's now hidden by default)
  • wrap .modal-header .modal-body .modal-footer inside .modal-content
  • wrap .modal-content inside .modal-dialog
  • Bootstrap 3 Modal Example Demo
    <div class="modal" id="myModal">
    	<div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
              <h4 class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body">
              Content for the dialog / modal goes here.
            </div>
            <div class="modal-footer">
              <a href="#" class="btn">Close</a>
              <a href="#" class="btn btn-primary">Save changes</a>
            </div>
          </div>
        </div>
    </div>



    Bootstrap 3 Migration Guide

    A summary of changes from Bootstrap 2.x to 3.0

    Major CSS Class Changes

    Bootstrap 2.xBootstrap 3.0
    .container-fluid.container
    .row-fluid.row
    .span*.col-md-*
    .offset*.col-md-offset-*
    .brand.navbar-brand
    .hero-unit.jumbotron
    .icon-*.glyphicon .glyphicon-*
    .btn.btn .btn-default
    .btn-mini.btn-xs
    .btn-small.btn-sm
    .btn-large.btn-lg
    .visible-phone.visible-sm
    .visible-tablet.visible-md
    .visible-desktop.visible-lg
    .hidden-phone.hidden-sm
    .hidden-tablet.hidden-md
    .hidden-desktop.hidden-lg
    .input-small.input-sm
    .input-large.input-lg
    .input-prepend.input-group
    .input-append.input-group
    .add-on.input-group-addon
    .btn-navbar.navbar-btn
    .thumbnail.img-thumbnail
    ul.inline.list-inline

    Bootstrap 3.0 New Classes & Elements

    ElementDescription
    Panels.panel .panel-body .panel-title .panel-heading .panel-footer .panel-collapse
    List groups.list-group .list-group-item .list-group-item-text .list-group-item-heading
    Glyphicons.glyphicon
    Jumbotron.jumbotron
    Tiny grid (<768 px).col-xs-*
    Small grid (>768 px).col-sm-*
    Medium grid (>992 px).col-md-*
    Large grid (>1200 px).col-lg-*
    Offsets.col-sm-offset-* .col-md-offset-* .col-lg-offset-*
    Push.col-sm-push-* .col-md-push-* .col-lg-push-*
    Pull.col-sm-pull-* .col-md-pull-* .col-lg-pull-*
    Input groups.input-group .input-group-addon .input-group-btn
    Form controls.form-control .form-group
    Inline controls.checkbox-inline .radio-inline
    Button group sizes.btn-group-xs .btn-group-sm .btn-group-lg
    Navbar.navbar-default .navbar-text .navbar-btn
    Navbar header.navbar-header
    Justified tabs / pills.nav-justified
    Responsive images.img-responsive
    Responsive tables.table-responsive
    Contextual table rows.success .danger .warning .active
    Contextual panels.panel-success .panel-danger .panel-warning .panel-info
    Modal.modal-dialog .modal-content
    Thumbnail image.img-thumbnail
    Well sizes.well-sm .well-lg
    Alert links.alert-link

    Bootstrap 3.0 Deprecated Classes / Elements

    ElementRemoved from 2.x3.0 Equivalent
    Hero Unit.hero-unit.jumbotron
    Form actions.form-actions-
    Grid.span*.col-md-*
    Fluid container.container-fluid.container (no more fixed grid)
    Fluid row.row-fluid.row (no more fixed grid)
    Icons.icon-*.glyphicon-*
    Navbar button.btn-navbar.navbar-btn
    Navbar inner.navbar-inner-
    Nav list.nav-list.list-group
    Thumbnails.thumbnails.col-* and .thumbnail
    Input append / prepend.input-append .input-prepend .add-on.input-group
    Dropdown submenu.dropdown-submenu-
    Tab alignments.tabs-left .tabs-right .tabs-below-

    Bootstrap 3.0 JavaScript Changes

    • Typeahead has been dropped, in favor of using Twitter Typeahead.
    • Modal markup has changed .modal-header .modal-body .modal-footer now get wrapped in .modal-content and .modal-dialog
    • Events are namespaced. For example to handle the modal 'show' event, use 'show.bs.modal'. For tabs 'shown' use 'shown.bs.tab', etc..

    Bootstrap 3.0 Additional Information

    • Notes & Caveats
    • .input-* are 100% width. Wrap inputs inside <div class='col-md-*'></div> to control input widths.
    • .badge no longer has contextual (-success,-primary,etc..) classes
    • .btn must also use .btn-default to get the 'default' button
    • .container and .row are now fluid (percentage-based)
    • Images are not responsive by default. Use .img-responsive for fluid IMG size
    • Include .glyphicon base class in all icons (ie: .glyphicon .glyphicon-asterisk).

    Bootstrap 3 Examples

    We have developed several Bootstrap 3 Templates that you can edit, preview or download. You can also find a large collection of Bootstrap 3 snippets and examples at Bootply.


    ©Copyright Bootply 2013