Full width – $md

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-md-1">Your HTML here</div>
	<div class="col-md-11">Your HTML here</div>
</div>

Two columns

Example

Code snippet

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

Three columns

Example

Code snippet

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

Four columns

Example

Code snippet

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

Five columns

Example

Code snippet

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

Six columns

Example

Code snippet

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

Seven columns

Example

Code snippet

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

Eight columns

Example

Code snippet

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

Nine columns

Example

Code snippet

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

Ten columns

Example

Code snippet

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

Eleven columns

Example

Code snippet

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

Twelve columns

Example

Code snippet

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