Search Knowledge Base Articles

Grids

The numbers (1-12) represent a portion of the total width of any div. All divs are divided into 12 columns, so, col-6 spans 6 of 12 columns (half the width), col-12 spans 12 of 12 columns (the entire width), etc.

So, if you want equal columns to span a div, write
<div class="col-sm-4">Column1</div>
<div class="col-sm-4">Column2</div>
<div class="col-sm-4">Column3</div>​

Or, if you want unequal columns to span that same width, you could write:
<div class="col-sm-2">Column1</div>
<div class="col-sm-6">Column2</div>
<div class="col-sm-4">Column3</div>​

Did you find this article useful?


Related Articles