Bootstrap 3 Mobile Grid System
The Bootstrap mobile grid system launched a few days ago with the Bootstrap 3 RC1. There’s been tons of changes to how things look and work in and it’s been rebuilt mobile first with ~72,000 additions/deletions from the last major version.
With the new mobile first focus I guess it seemed time to take another look at how things work on mobile and one of the most common complaints with Bootstrap 2.3.2 was that the grid system totally collapsed on mobile. While that does work it not optimal for all situations so in comes the new mobile grid.
The 2 most common edits by developers to how the old grid system worked was preventing certain columns from collapsing – by overriding the width on the small media query – and changing the order of the columns from right to left – by changing spans to
float:right and inverting the margins. Both of those issue have been completely fixed with Bootstrap 3 because you can decide which point the grid collapses (if you even want it to collapse at all) and you can now decide the order by pushing and pulling them.
New Bootstrap 3 Grid Classes
The whole grid system has been overhauled and the first thing you need to know is that the class names have been changed. Gone are the old
.span* classes we are used to, the new grid system uses
.col-* instead. There’s also
.col-lg-* for tablet and desktop respectively.
.col-lg-* collapses below desktop sizes, so it collapses on everything below large tablets.
.col-sm-* collapses on small tablets and mobile devices. The standard
.col-* class does not collapse at all.
Offsets are still there for anything above mobile view using
<div class="row"> <div class="col-2 col-offset-2></div> <div class="col-8></div> </div>
Responsive Grid Ordering
Bootstrap 3 has an easy way of ordering the columns in your grid. No matter what order you have your columns in your markup you can have them display in whatever order you want.
In terms of SEO this is good because you always want you main content to appear earlier in the code than the secondary content (IE the sidebar) so now even if you have a left sidebar you can have it after the main content in the markup.
Moving your columns around is as easy as pushing or pulling the them in the direction you want. Either use the
.col-push-* to move columns in the grid left or
.col-pull-* to pull them right.
Make your own Mobile Grid System
Inside the Bootstrap 3 LESS file there are a combination of
mixins that allow you to easily create your very own grid system. You can either do this yourself right now if you are comfortable with LESS
or you could use the Bootstrap 3 customizer to do it for you. Sorry customizer is disabled until official release of Bootstrap 3.
Like What You Read?
Say thanks by subscribing to the FREE PattonWebz Newsletter.