Using The Bootstrap Mobile Grid System In A Real World Setting

written by William Patton on July 29, 2013 in Tools of the Trade with 11 comments

The Bootstrap mobile grid system uses some clever CSS to make a simple to use, but extremely powerful, mobile grid system. The ability to rearrange columns as well as define different ways for them to display for different screen sizes makes it just as flexible as it is powerful.

Between Bootstrap 2 & 3 there were a lot of changes to how the grid system, and the core, worked. The push pull classes were added for ordering along with column sizing options that made it easy to handle different layouts at different screen sizes.

They were aremed with the knowledge they got from litterlay billions of pageviews and thousands of code submissions and ammedments on the github repo when they rebuilt mobile first for Bootstrap 3. During the rebuild they included everything developers wanted & everything users needed to make pages look and work great on any device with at any screensize.

The Mobile First Grid System

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-sm-* and .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 .col-offset-*.

<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 the order you have your columns in your markup you can have them display in whatever order you want. There’s 2 reasons why you would want to do this: an SEO reason and a UX reason.

In terms of usability if you have the sidebar first in the markup then it’s going to display before the main content when the grid finally collapses. That means your forcing the user to have to scroll away down before they reach what they are looking for. Not the best experience you could be giving.

In terms of SEO this is good for a bunch of reasons that can get quite complex but if your interested here’s the short version with the 2 main points of benefit:

• The earlier something is in the markup the more relevant that content is to the page. As a generic rule the post/page content is going to be more important that what’s in the sidebar.
• Search engines seem to give most (if not all) of the value of a link to the first occurrence of a link that it finds on a page.
  • If you link to something in both the sidebar and the main content then the first occurrence will be the most powerful in terms of SEO. You want the most powerful link to be surrounded by high quality related content that helps Search Engines work out where the most relevant place to rank it is. The content around it in the post is likely to be a better fit for that scenario that the content in the sidebar.

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.

To show you an example of the left sidebar scenario.

<div class="row ">
<div class="col-sm-8 col-sm-push-4">
<!-- this is the column for the main content -->
<!-- notice its being pushed by 4 column widths, that moves it 4 spaces right -->
</div>
<div class="col-sm-4 col-sm-pull-8">
<!-- this is the sidebar content column -->
<!-- it's pulled 8 column widths, that moves it 8 to the left -->
</div>
</div>

The above example shows how you can use the push/pull classes to rearrange the layout in a simple 2 column design.

Some site have simple 2 column layouts but most sites are a bit more complex than that. Maybe you have 3 columns or more and things are split with multiple rows and grids on the one page.

Bootstrap has you covered in those complicated situations as well.

Say you had 3 primary rows each with different column set-ups. Each behaves differently on different device sizes. Let’s also say that some of the columns contain their own grid systems that operate independently from their parent. And some may have multiple independent grids inside the same column.

It might sound overly complicated but it’s modelled on an existing design flow that’s fairly common on a lot of websites. Header, Content, Footer – 3 rows.

To achieve the layout described above you would use a combination of different sizing classes markup that matches this.

Make your own Mobile Grid System

Inside the Bootstrap 3 LESS file there are a combination of variables and 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.

I’ve made a lot of use of the Mobile Grid System and some of the mobile show/hide CSS from Bootstrap in my Best ReLoaded Bootstrap Theme.

tags: Bootstrap Bootstrap 3 Cascading Style Sheets Web design

---

Related Articles