The Bootstrap framework from Twitter is an awesome and powerful tool for front-end web development. Bootstrap makes it easy to create good-looking web pages and web apps, plus it has a ‘responsive grid’ built in to automatically make designs compatible with mobile browsers (both tablets & smartphones). It should come as no surprise that, less than 18 months after its first release, Bootstrap is now powering approximately 1% of all sites online.
A couple weeks ago the developers of Bootstrap made a major update – moving from version 2.3.2 to version 3.0 (RC1). Then, just yesterday (13 Aug, 2013), another update was made available as Release Candidate 2. Almost certainly there are a lot of development teams scrambling right now to update to the newest version without causing major disruptions.
Unfortunately, though, the Bootstrap changelog isn’t very informative about describing the particularities. So… I’ve been going through the documentation and want to point out some differences between the latest and previous versions.
Without further ado, here are some of the notable differences between Bootstrap v2.3 and v3.0:
1) Flat design
The most obvious difference between v3.0 and previous releases is the emphasis on flat design. Bootstrap includes tons of pre-styled UI components like navigation, buttons and dropdown menus. In previous versions, these components have featured pleasing, sophisticated CSS3 gradients and box shadows. The gradients are gone in v3.0, though, and have been replaced with flat colors instead. Likewise, some of the default border radius values have been reduced from 6px to 4px; components like dropdowns do still have rounded corners but they aren’t quite as round.
No big changes to typography in Bootstrap 3, but the default text styling has been refined just slightly. Helvetica Neue remains as the default font family, but font weights have been reduced on headlines with new emphasis on lighter font weights. Just take a look at the headlines and you’ll recognize the difference right away:
3) Mobile-first framework
So long bootstrap-responsive.css – Bootstrap is now responsive by default! Now the responsive grid and other responsive CSS are loaded all in the main bootstrap.css file. But, just in case you want to develop something without a responsive layout, that’s still achievable using
.col-lg- and the responsive utility classes. See below.
4) No more .row-fluid
One of the aspects I found most confusing about Bootstrap (v2.x) was the difference between a “row” and a “fluid row”. Only recently did I finally wrap my head around the conceptual differences between these two classes. Well, now row-fluid is out altogether.
This is all part of significant updates to the Bootstrap responsive grid. Essentially, all elements with the
.row class will be responsive. And children elements (typically columns) nested within a
.row element will adapt to different viewport widths based on the use of
.col-lg- class names.
If you’re planning to upgrade from Bootstrap v2 to version 3, you’ll need to remove all instances of the
.row-fluid class. Should be accomplished easily enough, though, by running a sitewide find & replace command to delete the ‘-fluid’ portion. Manipulating those rows back into fluid columns, though, may take some more finagling. Read on.
5) .span[#] has been replaced with .col-[#] instead
In the v2.x iterations of Bootstrap (not really sure prior to that), columns were created using the
.span classes nested inside
.row-fluid class elements. For example, this code would create two columns of the same width:
<div class="row"> <div class="span6"> Column One Here </div> <div class="span6"> Column Two Here </div> </div>
However, columns follow a different syntax in Bootstrap v3. The “
span#” class names have been changed to “
.span6 is now
.col-6 … note the hyphen before the number). For more information, see the documentation for Bootstrap grid options. The bigger change, though, comes from the addition of new classes “
".col-md-” and “
.col-lg-“. By default, columns created with the “
col-#” class will stack vertically on smaller screen sizes. But when used in combination with a “
col-#” class name, these new classes can be used to control break points for various size devices. This could create a tough decision for some developers on whether or not to upgrade to v3. In order to make the change, sites which are employing substantial layout tweaks to customize the user experience for mobile devices may need to do significant refactoring to change these classes. And it doesn’t look like there is any backward compatibility with older class names. On a positive note, the makers of Bootstrap are continuing to maintain the v2.3.2 documentation alongside the docs for v3. To assist in the upgrade process, the good folks at Divshot have developed a really cool automatic upgrading tool which updates Bootstrap v2.x HTML code, making it compatible with Bootstrap 3.0 (though do be aware it may have gaps/bugs): Bootstrap HTML Upgrader. Using the combination of
.col-lg- is also critical for creating fluid layouts in Bootstrap 3 and replaces the now-obsolete
.row-fluid that was used in prior versions. SIDE NOTE: I’m kind of a stickler for semantics, and I think this is a worthwhile change for the longterm. “Col” is descriptive of its purpose: segmenting content into columns. Plus, the
.span class could always be confused with the HTML element (especially in stylesheets, where class selectors and element selectors are only distinguished by a .).
6) Column ordering
Controlling the order in which columns are displayed is a brand new feature in Bootstrap 3. So, rather than using floats or CSS positioning to situate content in a different order than it appears in the DOM, you can now “push” or “pull” columns from their respective ordering in the document flow. To change the order in which columns appear in the UI, simply combine “
col-md-#” with “
col-md-push-#” (or “
col-md-pull-#” respectively). The number indicates the relative number of columns by which content should be pushed or pulled; it works the same way as column offsets have worked in older Bootstrap releases. For example, this code:
<div class="row"> <div class="col-md-9 col-md-push-3"> 9 </div> <div class="col-md-3 col-md-push-9"> 3 </div> </div>
Will produce the following result:
7) Responsive utility classes
There are also some subtle changes to the names used for responsive utility classes. In previous versions, elements could be explicitly hidden or explicitly displayed on certain screen sizes using the
.visible-desktop classes (and their respective
.hidden- counterparts). Now, in version 3, the device labels have been replaced with new, more semantic names. Plus there are breakpoints established for four different device sizes instead of three.
The new class names are:
Overall I’m a fan of the changes in the latest Bootstrap release. But, I’m not exactly looking forward to going back over my old code and updating everything with new class names. Mainly I’m looking forward to using Bootstrap 3 in the development of new sites where I can use the updated framework as a starting point.
Are you planning to upgrade from Bootstrap v2 to version 3? Is there something I’ve left out?