Full width – $lg

Show backgrounds:

Show background on the row class (Transparent red) Show background on the column classes (Transparent blue) Show background to show where space for content is available (White)

grid-example-show-boundaries

One column

Example

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

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

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

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

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

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

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

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

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

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

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

Code snippet

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