Update: on August 19th this post was updated to reflect the big changes made to Grids in Bootstrap 3 Final.
Over the last week, I’ve spent a lot of time using Bootstrap 3 on a new website for one of our products, Codiqa (check out the site, that’s a heavily customized Bootstrap 3 design!). Along the way I’ve gotten plenty of time to explore the new grid system, and how to take full advantage of it.
The new grid system in Bootstrap 3 is more powerful, and also more complicated than it was in 2.x, so I wanted to invest some time to explore all the features of the grid and how to really make use of it.
Hopefully this post explains grids to newcomers to Bootstrap, or those upgrading from Bootstrap 2.x with little to no experience of the new grids!
Mobile First?
Mobile first has become a popular buzzword lately, and for good reason: many websites are receiving a growing amount of mobile traffic, and it’s expected that mobile traffic will eclipse large-format devices such as desktop and laptop computers in the near future. Everyone is starting to worry they are focusing on the wrong devices.
With this in mind, Bootstrap 3 took a different approach to 2.x: designing for mobile right from the start. Bootstrap 3 is mobile first in the sense that the code for Bootstrap now starts by targeting smaller screens, and then “expands” components and grids for larger screens. Bootstrap 2.x took the opposite approach.
In general, this doesn’t really mean much for you, as all components should work generally the same as they used to no matter the device. However, the Grid has seen some major changes because of this mobile-first strategy, and like mobile before, desktops are now special devices that must be specifically accounted for.
.col-*?
In Bootstrap 3, the .span* classes have been removed, and replaced with a combination of .col-* classes: .col-xs-*, .col-sm-*, .col-md-*, and.col-lg-*. Color me confused the first time I saw that!
These column classes, while numerous and confusing, actually make it incredibly easy to create complex grid layouts for a variety of different devices.
The xs classes target mobile devices, sm targets tablets, md targets laptops and smaller desktop screens, and lg targets large desktop screens.
The best way to think about the new grid classes is that they work from mobile up, rather than from desktop down. This means by default your grid will stack from mobile up until the grid class breakpoint you’ve used is reached.
For example, using .col-lg-4 means your grid will stay stacked on mobile, tablet, and small desktop screens. Only until the large desktop breakpoint is reached will the grid go horizontal.
As a nice side effect of the mobile-first approach, mobile devices get a grid that doesn’t have the cross-platform inconsistencies of media queries nor the performance hit (however minimal).
.col-md-* will most likely be the most common grid class used, but for the sake of the future mobile majority, don’t just replace your .span* classes with .col-md-*! You’ll leave mobile devices and tablets with the same stacked experience. You’re better than that!
For best results, combine the classes as necessary depending on the content, as shown in the next example:
A wild example appears!
The screenshot above is taken from another one of my company’s products, Codiqa. Codiqa is a visual development tool targeted at HTML5 native apps and websites.
For this example, we have a set of icons that quickly explain the features available in any paid plan of Codiqa. When using just .col-md-3 on each feature the layout works really well on desktop size screens. But when you shrink the window down, you get this!
No thanks, just look at all that wasted space!
What we really want is to have a smaller grid of the feature icons on small devices. I decided moving from a 4 column layout to a 2 column layout on a small screen would be perfect. But how do we do this with Bootstrap grids?
When you look at the CSS used for the various grid classes, you’ll see that grid columns are just floated left with a percentage width of the size number divided by the number of columns. So a column with the class .col-lg-6 is just 6/12 = 50% of the width of the row (when the desktop breakpoint media query is active).
Since the desktop breakpoint media query won’t be active on the small display, we need to use .col-xs* instead, to maintain the grid columns (we could use .col-sm-* also, but I want the tablet and mobile devices to have the same dual column experience).
Adding .col-xs-6 to each .col-md-3 column, we get this, a grid that shows as 4 columns on large screens, and 2 on tablets and below:
Much nicer!
Nesting made Easier
One nice side effect of the 100% fluid grid on Bootstrap 3 is that nesting grids is now incredibly easy (if you used the fluid grid in Bootstrap 2.x, it’s the same experience).
With the old default grid in 2.x, you had to use smaller or equal grid column classes in sub-grids and columns, in order to add up to the column that this sub-grid was contained in. For example, if placing a grid inside of a grid column with the class .span9, your sub-columns would need to have sizes of 9 or less (since they were set to use pixel widths and would overflow if any bigger).
With the new grid (and the old fluid one), you just use the same grid column sizes, and think of percentages of the parent column. For example, .col-xs-6 inside of a .col-xs-6 is just 50% of that 50% column. Much more intuitive!
Offsets
Offsets are a useful feature for more specialized layouts (perfect for being or working with a pixel-perfect designer, like my co-founder Ben). They can be used to push columns over for more spacing, for example.
The .col-xs=* classes don’t support offsets, but they are easily replicated by using an empty cell.
To use offsets on large displays, use the .col-md-offset-* classes.
Grids, everywhere.
Once you start using the grid, you’ll find yourself using them everywhere to layout practically anything. They are a truly versatile tool and the sooner you start thinking in portals grids, the more effective you’ll be as a front-end designer or developer.
As a quick exercise, the next time you think you need to float a container for a layout, try using the grid instead. You’ll wonder how you ever got along without it.
If this post helped you, please leave a comment below or send me a tweet: http://twitter.com/maxlynch