Responsive Columns

Last edited 12/16/2019
Use the following code to create columns on your page. Columns are created as sections of a row. Each row is 12 across, so the total width of all columns in a row should equal 12. As a user's screen narrows, columns will responsively narrow, and eventually stack, for tablet and phone screens.

There is a lot of flexibility possible with columns beyond the examples shown here. Contact Tentaroo for assistance with more complex 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-8">CONTENT GOES HERE</div>
<div class="col-md-4">CONTENT GOES HERE</div>
</div>

 

2 Columns with Wide Right

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>

 

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>

 

We are always happy to assist with website training.