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>
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>
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>
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>
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>
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>
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>
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>
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>
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>