The new version of Bootstrap has been released. Compared to the previous version this is a major overhaul. In this tutorial we’ll take a look at the Bootstrap 3 new features.
- Bootstrap 3 is now a mobile-first framework (and of course) it’s still responsive.
- The grid system has been completely changed.
- And the design is now flat.
In this tutorial I will walk you through each of these new features.
With the release of version 3 Bootstrap has become a mobile-first framework. The Grid and CSS layout focus on small screens (smartphones, mobiles). On small screens you almost never use more than one column. So the mobile-first approach arranges all of the element to get stacked on top of each other on small screens. On medium sized or larger screens this one column layout will scale up to become horizontal.
One Grid System
Bootstrap 3 uses one grid system. In previous versions of Bootstrap you could either use a standard fixed grid system or a fluid grid system. Bootstrap 3 uses one fluid grid system!
The new grid system uses:
- Percentages (instead of pixels)
- Padding (instead of margin)
box-sizing : border-boxfor easy math
Grid classes for small and extra small devices
Bootstrap 3 also provides you with layout options that specifically target tiny (smartphones) and small (tablets) devices.
What’s this?, you might think. Didn’t you just explain that Bootstrap 3 uses a grid system that focuses on small screens? Yes, I did. But with the grid system I explained earlier you get a one column layout on small screens. That’s not always what you want. There will be situations where you want to use more complex layouts for small screens.
I’ll explain in more detail how you can use the new grid classes in my next tutorial Bootstrap 3: a New Grid System.
One CSS file
In previous versions of Bootstrap the download contained a standard and a responsive CSS file. With the choice for mobile-first and the use of one grid system the new download contains one CSS file that combines the standard with the responsive CSS rules.
So if you want to upgrade your earlier responsive Bootstrap designs to version 3 take care! Your old files contain 2 links in the head section. One for the standard CSS file and one for the responsive CSS file. When you do the upgrade to version 3 make sure these 2 links are replaced with one link to the new CSS file.
Bootstrap 3 also has a new design. Flat design has become the trend on the web and Bootstrap 3 has adopted it.
If you aren’t familiar with flat design these are the characteristics:
- Flat design removes textures, shadows, gradients.
- Flat design uses solid colors and often typography figures prominently into the design.
- Flat designs are minimalist, limiting the number of graphic elements on a web page.
If you prefer the Bootstrap style with gradients, shadows, etc. you can still use it because Bootstrap has included an optional theme with this style.
If you like using flat design with Bootstrap you might also be interested in the free flat UI kit from Designmodo.
The introduction of the Bootstrap 3 version also means – at least for now – that most of the Theme Generators I discussed in an earlier post have become ‘obsolete’. If you do try to use one of these Theme Generators with Bootstrap 3 you will see that components like the Hero Unit (called Jumbotron in Bootstrap 3) and the Navbar do not get styled the way you want. Currently only Bootstrap Magic can be used to customize a Bootstrap 3 theme. I will show you how in one of the coming tutorials.