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>