The Grid

The default Responsive grid system utilizes 12 columns. These can be wrapped in a containing element marked with the class .container which will constrain the width to 95% of the viewport width up to a maximum of 1140px and center the grid within the viewport.

On viewports below 768px wide, the columns stack vertically unless otherwise specified. On IE8 the grid system is static.

Grids are laid out as follows:

Responsive Standard

A twelve column fluid grid system.

<!-- A two column layout -->
<div class="row">
 <div class="column-6"> First column </div> 
 <div class="column-6"> Second column </div> 
</div>
12
11
1
10
2
9
3
8
4
7
5
6
6
5
7
4
8
3
9
2
10
1
11

Responsive: No Gutter

Add class .no-gutter to the row.

<!-- A two column layout -->
<div class="row no-gutter">
 <div class="column-6"> First column </div> 
 <div class="column-6"> Second column </div> 
</div>
12
11
1
10
2
9
3
8
4
7
5
6
6
5
7
4
8
3
9
2
10
1
11

Fixed Width

Add class .fixed to the container.

<!-- A two column layout -->
<div class="container fixed">
 <div class="row">
 <div class="column-6"> First column </div> 
 <div class="column-6"> Second column </div> 
 </div>
</div>
12
11
1
10
2
9
3
8
4
7
5
6
6
5
7
4
8
3
9
2
10
1
11

Persistent columns

Add class .fixed to the row.

<!-- A two column layout -->
<div class="row fixed">
 <div class="column-6"> First column </div> 
 <div class="column-6"> Second column </div> 
</div>
6
6
4
4
4

Nested columns

<!-- A two column layout -->
<div class="row">
 <div class="column-6"> First column 
 <div class="row">
 <div class="column-6"> First nested column </div> 
 <div class="column-6"> Second nested column </div> 
 </div>
 </div> 
 <div class="column-6"> Second column 
 <div class="row">
 <div class="column-6"> First nested column </div> 
 <div class="column-6"> Second nested column </div> 
 </div>
 </div> 
</div>
6
6
6
6
6
6

Persistent Nested columns

Add class .fixed to the row.

<!-- A two column layout -->
<div class="row fixed">
 <div class="column-6"> First column 
 <div class="row fixed">
 <div class="column-6"> First nested column </div> 
 <div class="column-6"> Second nested column </div> 
 </div>
 </div> 
 <div class="column-6"> Second column 
 <div class="row fixed">
 <div class="column-6"> First nested column </div> 
 <div class="column-6"> Second nested column </div> 
 </div>
 </div> 
</div>
6
4
4
4
6
4
4
4

Fixed Width : Nested columns

<!-- A two column layout -->
<div class="container fixed">
 <div class="row">
 <div class="column-6"> First column 
 <div class="row">
 <div class="column-6"> First nested column </div> 
 <div class="column-6"> Second nested column </div> 
 </div>
 </div> 
 <div class="column-6"> Second column 
 <div class="row">
 <div class="column-6"> First nested column </div> 
 <div class="column-6"> Second nested column </div> 
 </div>
 </div> 
 </div>
</div>
6
6
6
6
6
6

Offset Columns

Add class .push-[number] to the column.

<!-- A one column layout pushed -->
<div class="row">
 <div class="column-6 push-6"> First column </div> 
</div>
1
2
3
4
5
6
7
8
9
10
11

Offset Columns : No Gutter

Add class .no-gutter to the row.

Add class .push-[number] to the column.

<!-- A one column layout pushed -->
<div class="row no-gutter">
 <div class="column-6 push-6"> First column </div> 
</div>
1
2
3
4
5
6
7
8
9
10
11

Spaced Columns

Add class .no-gutter to the row.

Add class .push-[number] to the column.

<!-- A two column layout pushed -->
<div class="row no-gutter">
 <div class="column-3"> First column </div> 
 <div class="column-3 push-3"> Second column </div> 
</div>
3
3