Responsive Columns

^{Last edited 7/8/2021}
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

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

 

3 Columns with Wide Middle

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

 

2 Columns with Wide Left

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

 

2 Columns with Wide Right

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

 

4 Equal Columns

<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>