Grid system

Layouting is done very often in websites. And it is not always easy to get exactly what you want. That’s where Bootstraps grid system comes into play. It gives you simple to use tools (css-classes in fact), to make your life easyer! The Bootstrap gridsystem is probably the best of all available, as they took care about every possible situation you can face. Further it’s developed with mobile first in mind.

Before we start – make sure your grid system is always contained in a div, which has the container-class defined like in the following code to work properly:

<div class="container">
  ...
</div>

How bootstrap columns work

The Bootstrap grid system is made up of twelve columns to define the layout. To use these columns in your html and probably span content over multiple columns, bootstrap gives you the col-classes in your hands. See the following Example to get a feeling how they look like:

col-xs-1 (extra small screen, uses one column)
col-sm-2 (small screen, uses two columns)
col-md-5 (medium screen, uses five columns)
col-lg-9 (large screen, uses nine column)

Generic column-class definition:
col-<screensize>-<number of columns>

The number at the end of the class is summed up until twelve to make up one row. The following example shows two rows, which both use all twelve base-columns to define the layout:

Example

<div class="row">
	<div class="col-sm-3">.col-sm-3</div>
	<div class="col-sm-3">.col-sm-3</div>
	<div class="col-sm-6">.col-sm-6</div>
</div>
<div class="row">
	<div class="col-sm-3">.col-sm-3</div>
	<div class="col-sm-3">.col-sm-3</div>
	<div class="col-sm-3">.col-sm-3</div>
	<div class="col-sm-3">.col-sm-3</div>
</div>

Play with example »

Nesting Columns

If we want to nest columns, we can simply add a new row-div into a column. The nested row has then again twelve columns available, which we can use fully or also just partially, depending on your needs. See the following example, which uses nested columns:

Example

<div class="row">
	<div class="col-xs-4">.col-xs-4</div>
	<div class="col-xs-4">
		<div class="row">
			<div class="col-xs-4">left nested</div>
			<div class="col-xs-4">middle nested</div>
			<div class="col-xs-4">right nested</div>
		</div>
	</div>
	<div class="col-xs-4">.col-xs-4</div>
</div>

Play with example »

Column Offset

With the css-classes above you can do already alot, but what if we have a gap between the contents? Do we need to insert an empty div? Actually no. We can use the bootstrap column-offset class! With the example class .col-md-offset-2 we would have gap of 2 columns on the left side. See the following example and play with the offset-values!

Example

<div class="row">
	<div class="col-xs-3">.col-xs-3</div>
	<div class="col-xs-3">.col-xs-3</div>
	<div class="col-xs-3 col-xs-offset-3">.col-xs-3</div>
</div>

Play with example »

Column Ordering

Today adjusting the content to the devices screensize became very important. Sometimes you are then forced to rearrange the content of the website and i.e. change the order of the columns for smaller devices. For this scenario we can use Bootstraps column-push and pull classes. They not only allow to change the order but also the size at the same time!

Note, that to switch to columns, one of them must be pulled and the other pushed. If you just pull one column, the other one gets overlapped. See and try the following example:

Example

<div class="row">
	<div class="col-xs-3 col-xs-push-6">.col-xs-3</div>
	<div class="col-xs-3 col-xs-push-6">.col-xs-3</div>
	<div class="col-xs-6 col-xs-pull-6">.col-xs-6</div>
</div>

Play with example »