Bootstrap 3 Grid System

In one of the previous posts I discussed the new Bootstrap features. A very important one is the Bootstrap 3 Grid System.

With the new Grid system you can now create web designs that really target small sized screens and scale up beautifully on larger sized screens.

Mobile-first

The new Grid System starts out stacked on mobiles and portrait-tablets before scaling up to horizontal on desktops devices. On a desktop this automatically scales up to a layout where the elements sit side by side horizontally.

If you have been creating your designs with the previous version of Bootstrap you will be used to span-classes. These have been replaced with class names like this “col-md-x” (see example below):

The Grid System is based on 12 columns. So you should use a combination of classes that adds up to twelve (e.g. col-md-3+col-md-3+col-md-3+col-md-3 or col-md-6+col-md-4+col-md-2, etc.).

Four Grid Classes

The Bootstrap 3 grid system has four tiers of classes:

  1. xs (phones),
  2. sm (tablets),
  3. md (desktops), and
  4. lg (larger desktops).

 

Bootstrap Grid System table with properties of classes

You can use nearly any combination of these classes to create more dynamic and flexible layouts.

If you prefer to see 2 elements sitting side by side on small screens you could use this markup:

Grid Offset

In situations where you want to increase the left margin you can use an offset.

A video for instance with a width of 8 columns would normally sit on the left of the screen. Leaving an open space to the right of the video. We can center the video by using an offset of 2 columns:

On mobile screens the offset will disappear automatically (because we want to use all of the available screen real estate on small screens).

Special layouts

With the four available class types you can create all kinds of layouts. You might want to create a layout with 2 elements where:

  • On larger screens the larger element takes up 2/3 of the total width and the smaller element takes up the remaining 1/3.
  • On medium sized screens a slightly different division of total width.
  • And on small screens you want the larger element to take up 100% of the total width and the smaller element 50%.

The markup needed for this is:

The layout above results in stacked elements because the total number of columns on extra small screens added up to more than 12 columns (col-xs-12 + col-xs-6). If we had not added these xs-classes like this we would still have had stacked elements but both elements would have filled out to a 100% width on a mobile screen. Which for this specific element (a to-do list) would have been ungainly.

Add your comment