The Grid // Responsive columns

Responsive Grid You can use up to 6 responsive columns

Using the grid is easy, simply create a .row element and a number of child elements with a class of .col-{columns span}.
Each .col-*-* spans a certain portion of the row.

The code shown will create a row of 4 equally sized columns, which matches the 4th row in the grid shown above.

<div class="row">
	<div class="col-1-4">Content</div>
	<div class="col-1-4">Content</div>
	<div class="col-1-4">Content</div>
	<div class="col-1-4">Content</div>
</div>

Nested Columns You can place columns inside columns

To nest your content, add a new .row and set of .col-*-* children within an existing .col-*-* element. Nested rows should include a set of columns that also add up to a whole 1.

Nested columns are also responsive and there is no limit on how deep can nesting go. Note that the width of each column will be set based on the width of its parent .row and NOT the total page width. This opens a door for creating more complicated layouts and allows creating more than 6 columns per row.

The code shown will create a layout matching the 1st row in the grid shown above.

<div class="row">
	<div class="col-1-2">
		<div class="row">
			<div class="col-1-2">Content</div>
			<div class="col-1-2">Content</div>
		</div>
	</div>
	
	<div class="col-1-2">
		<div class="row">
			<div class="col-1-3">Content</div>
			<div class="col-1-3">Content</div>
			<div class="col-1-3">Content</div>
		</div>
	</div>
</div>

Offset Columns You can push or pull columns

Sometimes, for any reason, you might want to move a column to the right or to the left. Offsets allow you to create additional space between columns in a row. You can offset a column simply by adding a class of push-{columns span} (move to the right) or pull-{columns span} (move to the left).

The code shown will create a layout matching the 2nd row in the grid shown above.

<div class="row">
	<div class="col-1-4 push-3-4">Pushed 1/4</div>
	<div class="col-3-4 pull-1-4">Pulled 3/4</div>
</div>

Centered Columns You can also center a column

You can center a column just by adding a class centered to the column block.

Centered columns are placed in the middle of the row. This does not center their content, but centers the grid element itself. This is a convenient way to make sure a block is centered, even if you change the number of columns it contains. Note: There cannot be any other column blocks in the row for this to work.

The code shown will create a layout matching the 2nd row in the grid shown above.

<div class="row">
	<div class="col-3-4 centered">
		<div class="row">
			<div class="col-1-2"><span>Nested 1/2 Column</span></div>
			<div class="col-1-2"><span>Nested 1/2 Column</span></div>
		</div>
	</div>
</div>