Full width – $xs
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-xs-1">Your HTML here</div> <div class="col-xs-11">Your HTML here</div> </div>
Two columns
Example
2⁄12
10⁄12
Code snippet
<div class="row"> <div class="col-xs-2">Your HTML here</div> <div class="col-xs-10">Your HTML here</div> </div>
Three columns
Example
3⁄12
9⁄12
Code snippet
<div class="row"> <div class="col-xs-3">Your HTML here</div> <div class="col-xs-9">Your HTML here</div> </div>
Four columns
Example
4⁄12
8⁄12
Code snippet
<div class="row"> <div class="col-xs-4">Your HTML here</div> <div class="col-xs-8">Your HTML here</div> </div>
Five columns
Example
5⁄12
7⁄12
Code snippet
<div class="row"> <div class="col-xs-5">Your HTML here</div> <div class="col-xs-7">Your HTML here</div> </div>
Six columns
Example
6⁄12
6⁄12
Code snippet
<div class="row"> <div class="col-xs-6">Your HTML here</div> <div class="col-xs-6">Your HTML here</div> </div>
Seven columns
Example
7⁄12
5⁄12
Code snippet
<div class="row"> <div class="col-xs-7">Your HTML here</div> <div class="col-xs-5">Your HTML here</div> </div>
Eight columns
Example
8⁄12
4⁄12
Code snippet
<div class="row"> <div class="col-xs-8">Your HTML here</div> <div class="col-xs-4">Your HTML here</div> </div>
Nine columns
Example
9⁄12
3⁄12
Code snippet
<div class="row"> <div class="col-xs-9">Your HTML here</div> <div class="col-xs-3">Your HTML here</div> </div>
Ten columns
Example
10⁄12
2⁄12
Code snippet
<div class="row"> <div class="col-xs-10">Your HTML here</div> <div class="col-xs-2">Your HTML here</div> </div>
Eleven columns
Example
11⁄12
1⁄12
Code snippet
<div class="row"> <div class="col-xs-11">Your HTML here</div> <div class="col-xs-1">Your HTML here</div> </div>
Twelve columns
Example
12⁄12
Code snippet
<div class="row"> <div class="col-xs-12">Your HTML here</div> </div>