On August 19th @mdo and @fat released the first final version of Bootstrap 3, ending a months-long development process aimed at making the hit framework even better.
With Bootstrap 3 out, I’ve received many questions from bootstrap developers and Jetstrap customers about whether it will work with v2, what the big changes are, and if it’s worth upgrading to.
I hope this post helps explain the new version of Bootstrap, and the most important changes and what you need to know to take advantage of them (check the v3 pull request for a complete list of changes):
Flat Design
The first thing you’ll probably notice with Bootstrap 3 is how flat the design is. This is following a fairly recent web-design trend in throwing out excessive gradients, shadows, and textures, and going for a simple, minimalist look.
Though the flat design in Bootstrap 3 isn’t a design statement, for many developers that are considering going Flat, the look has several important benefits.
First of all, it’s now easier than ever to customize Bootstrap to fit your brand. No more will you have to fiddle with various color stops on a background gradient, or try to remove animations on multiple stages of a button click.
Your websites will now look more modern, at least for as long as flat design reigns.
With the simpler design, I expect we’ll see less “bootstrappy” looking sites. This might be a pipe dream but I hope the flat design encourages web devs to tweak and fiddle with the default look.
At any rate, the new look breaks the monotony of the old 2.x look and feel that has become ubiquitous. But if you still yearn for a more gradienty time, you can still use an optional Bootstrap 2 theme.
Grids
Grids are the cornerstone of Bootstrap, and they’ve received a major overhaul in 3. For an in-depth review of the new Grids, see our recent Bootstrap 3 Grid article.
The grid system is now a single fluid and mobile-first grid.
This means the grid now only uses percentage based widths instead of pixel-based widths. And now that it’s mobile-first, the grid starts stacked and scales “up” for larger screens.
In the past, Bootstrap was targeting a 940px width page, perfect for most desktop-oriented websites.
But mobile growth has only continued to explode, and more and more websites need great mobile experiences to take advantage of this growth.
With this in mind, Bootstrap 3 adds a set of classes that let you control grid behavior on all different devices. For example, you can configure your grid to not stack on small screens, or only expand into columns on large screens.
With that change, the span-* classes are gone, so old grids will not work with the new grid system.
The new grid system is powerful, and I expect it’s going to confuse a lot of people. Expect to spend a good amount of time in the grids section of the Bootstrap docs before you get the hang of it. I know I had to!
New Components and Usage
Bootstrap 3 now includes two new components: List Groups, and Panels.
I’m most excited about List Groups, which give you an iOS-looking list control. Perfect for grouping related items, and they make it easy to add annotations such as badges and form elements.
Along with new components, just about every component has received changes, either to their markup, required classes, or behavior.
The Modal, in particular, has received many important changes. For example, no longer should you apply the hide class, they are hidden by default. They also require new markup in certain cases. Be sure to take a look at the docs and cross-check with the complete changes list on the pull request.
IE7, We Hardly Knew Ye
With Bootstrap 3, support for Internet Explorer 7 has been removed from the project.
If you need IE7 support, consider trying out bootstrap-ie7, which is sure to be one of many community sponsored projects to improve older browser support in Bootstrap.
To make sure your Bootstrap 3 websites work well in older browsers, take a look at the Browser Compatibility guide in the official Bootstrap docs.
Migrating to Bootstrap 3
With all the changes introduced in Bootstrap 3, you can’t just link to the new stylesheets and javascript from an old v2.x project and expect it to work.
Grids are completely new, and must be upgraded. Many controls have new behavior or require new classes and markup.
I recommend big projects that already use Bootstrap 2.x to just stay on that version. While there are many important updates and improvements, upgrading a large project might not be worth the effort.
However, I think new projects should start to consider Bootstrap 3 as it moves through the Release Candidate phase and becomes more stable.
Right now Bootstrap 3 has bugs and isn’t 100% production ready. However, with the release of RC1, you can expect the API to stay relatively stable through to the official release.
ETA on Jetstrap Support of B3?
As of August 19th, Jetstrap now supports Bootstrap 3 in all new projects in Jetstrap.
We are excited about the new changes and we know they will only make this great framework even better.
And as always, feel free to leave a comment with any questions you might have. I am also learning about Bootstrap 3 so I can probably learn a thing or two from you!