Bootstrap Grid Classes

Responsive Foundation uses a modified version of the Bootstrap grid system. W3schools has some great documentation on that here. Bootstrap is set up so that you use two classes together to create a grid – your column class, which holds your content, and a row class that wraps around it so that the content lines up with the grid. The column classes rely on padding to create gutters, so putting a background on your row or column classes when using these classes will probably not give you the results you’re expecting to see. If you need to add a background, you probably want to use our custom margin classes instead.

Example pages for testing

Basic usage

Show backgrounds:

1⁄12

11⁄12

2⁄12

10⁄12

3⁄12

9⁄12

4⁄12

8⁄12

5⁄12

7⁄12

6⁄12

6⁄12

7⁄12

5⁄12

8⁄12

4⁄12

9⁄12

3⁄12

10⁄12

2⁄12

11⁄12

1⁄12

12⁄12

grid-example-show-boundaries

One column

Example

1⁄12
11⁄12

Code snippet

<div class="row">
	<div class="col-1">Your HTML here</div>
	<div class="col-11">Your HTML here</div>
</div>

Two columns

Example

2⁄12
10⁄12

Code snippet

<div class="row">
	<div class="col-2">Your HTML here</div>
	<div class="col-10">Your HTML here</div>
</div>

Three columns

Example

3⁄12
9⁄12

Code snippet

<div class="row">
	<div class="col-3">Your HTML here</div>
	<div class="col-9">Your HTML here</div>
</div>

Four columns

Example

4⁄12
8⁄12

Code snippet

<div class="row">
	<div class="col-4">Your HTML here</div>
	<div class="col-8">Your HTML here</div>
</div>

Five columns

Example

5⁄12
7⁄12

Code snippet

<div class="row">
	<div class="col-5">Your HTML here</div>
	<div class="col-7">Your HTML here</div>
</div>

Six columns

Example

6⁄12
6⁄12

Code snippet

<div class="row">
	<div class="col-6">Your HTML here</div>
	<div class="col-6">Your HTML here</div>
</div>

Seven columns

Example

7⁄12
5⁄12

Code snippet

<div class="row">
	<div class="col-7">Your HTML here</div>
	<div class="col-5">Your HTML here</div>
</div>

Eight columns

Example

8⁄12
4⁄12

Code snippet

<div class="row">
	<div class="col-8">Your HTML here</div>
	<div class="col-4">Your HTML here</div>
</div>

Nine columns

Example

9⁄12
3⁄12

Code snippet

<div class="row">
	<div class="col-9">Your HTML here</div>
	<div class="col-3">Your HTML here</div>
</div>

Ten columns

Example

10⁄12
2⁄12

Code snippet

<div class="row">
	<div class="col-10">Your HTML here</div>
	<div class="col-2">Your HTML here</div>
</div>

Eleven columns

Example

11⁄12
1⁄12

Code snippet

<div class="row">
	<div class="col-11">Your HTML here</div>
	<div class="col-1">Your HTML here</div>
</div>

Twelve columns

Example

12⁄12

Code snippet

<div class="row">
	<div class="col-12">Your HTML here</div>
</div>