Flexible grid
A simple way to build flexible responsive columns:
- Add a
.row container
- Add as many
.col elements as you want
Each column will have an equal width, in a row. There is no restriction on number of columns, but
it is recommended not to add more than 12 columns in a row.
|
<div class="row">
<div class="col">
<div class="card">.col</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="card">.col</div>
</div>
<div class="col">
<div class="card">.col</div>
</div>
<div class="col">
<div class="card">.col</div>
</div>
</div>
|
|
Sized
You can also specify the size of the columns
- Add a
.row container
- Add a
.col-n child where n can be from 1 to 12
Each column class is named after how many columns you want out of 12. So if you want 4 columns out of 12, use:
.col-4 .
|
<div class="row">
<div class="col-1"> .col-1 </div>
<!-- repeat 11 times -->
</div>
<div class="row">
<div class="col-4"> .col-4 </div>
<!-- repeat twice -->
</div>
<div class="row">
<div class="col-12"> .col-12 </div>
</div>
|
|
Responsive grids:
We now have responsive grids that work based on device width.
- All columns are 100% for device width < 600px
.col and .col-N for all device sizes >= 600px
.col-N-md for >= 900px sizes
.col-N-lg for >= 1200px sizes
|
<div class="row">
<div class="col-12 col-6-md col-4-lg">
<div class="card">.col-12.col-6-md.col-4-lg</div>
</div>
<div class="col-6 col-3-md col-4-lg">
<div class="card">.col-6.col-3-md.col-4-lg</div>
</div>
<div class="col-6 col-3-md col-4-lg">
<div class="card">.col-6.col-3-md.col-4-lg</div>
</div>
</div>
<div class="row">
<div class="col col-6-lg">
<div class="card">.col.col-6-lg</div>
</div>
<div class="col col-3-lg">
<div class="card">.col.col-3-lg</div>
</div>
<div class="col col-3-lg">
<div class="card">.col.col-3-lg</div>
</div>
</div>
|
.col-12.col-6-md.col-4-lg
|
Mix-n-Match
You can use a combination of flexible and sized columns.
When using a combination, the sized width column takes the size specified and the remaining is filled in by the
flexible column.
|
<div class="row">
<div class="col-2">
<div class="card">.col-2</div>
</div>
<div class="col-2">
<div class="card">.col-2</div>
</div>
<div class="col">
<div class="card">auto</div>
</div>
<div class="col-3">
<div class="card">.col-3</div>
</div>
</div>
<div class="row">
<div class="col-10">
<div class="card">.col-10</div>
</div>
<div class="col">
<div class="card">auto</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="card">auto</div>
</div>
<div class="col">
<div class="card">auto</div>
</div>
<div class="is-full-width"></div>
<div class="col">
<div class="card">auto</div>
</div>
<div class="col">
<div class="card">auto</div>
</div>
</div>
|
|
Reverse Direction
Add .reverse to the .row to reverse the column direction.
|
<div class="row reverse">
<div class="col-6">
<div class="card">.col-6</div>
</div>
<div class="col-3">
<div class="card">.col-3</div>
</div>
<div class="col-3">
<div class="card">.col-3</div>
</div>
</div>
|
|