Column Control
Create a fully responsive, fluid and nestable grid layout.
Break Points
| Extra small | Small | Medium | Large | |
|---|---|---|---|---|
| Break points | None | 540 | 840 | 1024 |
| Class prefix | .bs-col- | .bs-col-sm- | .bs-col-md- | .bs-col-lg- |
| Number of columns | 12 | |||
| Gutter width | 20px (10px each side) | |||
Example # Equal width
bs-col
bs-col
bs-col
bs-col
bs-col-md
bs-col-md
HTML
<div class="bs-row">
<div class="bs-col">bs-col</div>
<div class="bs-col">bs-col</div>
<div class="bs-col">bs-col</div>
<div class="bs-col">bs-col</div>
</div>
<div class="bs-row">
<div class="bs-col-md">bs-col-md</div>
<div class="bs-col-md">bs-col-md</div>
</div>
Example # Setting one column width
bs-col-sm
bs-col-sm-6
bs-col-sm
bs-col-sm
HTML
<div class="bs-row">
<div class="bs-col-sm">bs-col-sm</div>
<div class="bs-col-sm-6">bs-col-sm-6</div>
<div class="bs-col-sm">bs-col-sm</div>
<div class="bs-col-sm">bs-col-sm</div>
</div>
Example # Setting all column width
bs-col-md-4
bs-col-md-4
bs-col-md-4
HTML
<div class="bs-row">
<div class="bs-col-md-4">bs-col-md-4</div>
<div class="bs-col-md-4">bs-col-md-4</div>
<div class="bs-col-md-4">bs-col-md-4</div>
</div>
Example # Mix break points
bs-col-lg-5, bs-col-md-4, bs-col-sm-3
bs-col-sm-4
bs-col-lg-3, bs-col-md-4, bs-col-sm-5
HTML
<div class="bs-row">
<div class="bs-col-lg-5 bs-col-md-4 bs-col-sm-3">bs-col-lg-5, bs-col-md-4, bs-col-sm-3</div>
<div class="bs-col-sm-4">bs-col-sm-4</div>
<div class="bs-col-lg-3 bs-col-md-4 bs-col-sm-5">bs-col-lg-3, bs-col-md-4, bs-col-sm-5</div>
</div>