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