Training: Responsive Columns

3 Equal Columns

CONTENT GOES HERE
CONTENT GOES HERE
CONTENT GOES HERE

<div class="row ">
<div class="col-md-4">CONTENT GOES HERE</div>
<div class="col-md-4">CONTENT GOES HERE</div>
<div class="col-md-4">CONTENT GOES HERE</div>
</div>

 

3 Columns with Wide Middle

CONTENT GOES HERE
CONTENT GOES HERE
CONTENT GOES HERE

<div class="row ">
<div class="col-md-3">CONTENT GOES HERE</div>
<div class="col-md-6">CONTENT GOES HERE</div>
<div class="col-md-3">CONTENT GOES HERE</div>
</div>

 

2 Columns with Wide Left

CONTENT GOES HERE
CONTENT GOES HERE

<div class="row ">
<div class="col-md-4">CONTENT GOES HERE</div>
<div class="col-md-8">CONTENT GOES HERE</div>
</div>

 

2 Columns with Wide Right

CONTENT GOES HERE
CONTENT GOES HERE

<div class="row ">
<div class="col-md-8">CONTENT GOES HERE</div>
<div class="col-md-4">CONTENT GOES HERE</div>
</div>

 

4 Equal Columns

CONTENT GOES HERE
CONTENT GOES HERE
CONTENT GOES HERE
CONTENT GOES HERE

<div class="row ">
<div class="col-xs-6 col-sm-3">CONTENT GOES HERE</div>
<div class="col-xs-6 col-sm-3">CONTENT GOES HERE</div>
<div class="col-xs-6 col-sm-3">CONTENT GOES HERE</div>
<div class="col-xs-6 col-sm-3">CONTENT GOES HERE</div>
</div>