What’s new in Twitter Bootstrap 3?

We have been waiting for it for a long time, it is now a reality: Bootstrap 3 (BS3) RC1 was released July 27th.

Update:
August 13th: Bootstrap 3 RC2 released.
August 19th: Bootstrap 3 released.

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

Note that the project moved away from Twitter’s organization, and is now under it’s own twbt as announced in December.

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 System

Modified

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.

Note: The grid is fluid by default now, therefore .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 design

Modified

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.

Note: BS3 drops support for IE7 and Firefox 3.6 by removing hacks specific to those platforms (such as *zoom: 1, or -moz-box-shadow).

Typography

Modified

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

Table

Modified

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

Forms

Modified

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.

Note: All textual <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

Buttons

Modified

Buttons style have been simplified: no more outer box-shadow by default, no more gradient or text shadow.

Note: Default button now requires .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

Images

Modified

BS3 consolidates image thumbnail styles in disfavor of .img-polaroid that disappears.

Note: Remember that images can be made responsive-friendly via the addition of the .img-responsive class.

  • BS2 BS3
    .img-polaroid
    .img-thumbnail
    (for regular inline(-block) images)

    Class changes between BS2 and BS3

Icons

Removed

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 menus

Modified

bs3_dropdown

Dropdown menus introduces dropdown headers. It adds a header to any dropdown menu as you can see on the screenshot beside.

Note: Unfortunately BS3 does not support submenus as the code necessary to make them work is “just too much overhead”… I am really sad about that as WordPress themes like my own: ShprinkOne WordPress Theme require a 3 level menu that is now more difficult to produce.

  • BS2 BS3
    .dropdown-header

    Class changes between BS2 and BS3

Buttons

Modified

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

Alerts

Modified

<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.

Navs

Modified

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.

Note: You can still use the JavaScript plugin and custom CSS to make left/right tabs, but we will no longer include those in the core.

  • BS2 BS3
    .nav-list
    .tabs-left
    .tabs-right
    .tabs-below

    Class changes between BS2 and BS3

Navbar

Modified

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 group

New

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.

Note: Add the badges component to any list group item and it will automatically be positioned on the right.

bs3_listgroup-badge

	<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.

bs3_listgroup-linked

	<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.

bs3_listgroup-linked-custom

	<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>

Badges

Modified

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 components

Modified

BS3 has a lighter font-weight for headings (.page-header) than BS2. font-weight: 500; VS font-weight: bold;

Note: BS3 scale the font size in responsive views.

  • BS2 BS3
    .hero-unit .jumbotron

    Class changes between BS2 and BS3

Progress bars

Modified

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

Panels

New

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.

bs3_panel

	<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.

bs3_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.

bs3_panel-success

	<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 🙂

Sources