Full width – all breakpoints

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

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>