Header
The grid system provides us with a device agnostic layout system.
A basic grid is constructed out of three elements, .container
, .row
and .col
<div class="container">
<div class="row">
<div class="col-12">...</div>
<div class="col-12">...</div>
</div>
</div>
A 24 column grid allows us to make a varied range of layouts. These are some of the possible layouts.
<div class="container">
<div class="row">
<div class="col-1">...</div>
<div class="col-24">...</div>
</div>
<div class="row">
<div class="...">...</div>
<div class="...">...</div>
</div>
<div class="row">
<div class="col-24">...</div>
<div class="col-1">...</div>
</div>
</div>
It's possible to leave some some columns empty. The syntax for that is col-offest-{number}
<div class="container">
<div class="row">
<div class="col-8">...</div>
<div class="col-12 col-offset-4">...</div>
</div>
</div>
Add classes to align elements to the start, end and center of the row. Notice that these classes are applied on the row
element.
<div class="container">
<div class="row start">
<div class="col-8">...</div>
</div>
<div class="row end">
<div class="col-8">...</div>
</div>
<div class="row center">
<div class="col-8">...</div>
</div>
</div>
Add the around
or between
classes to distribute the contents of the row. Notice that these classes are applied on the row
element.
<div class="container">
<div class="row around">
<div class="col-8">...</div>
<div class="col-8">...</div>
</div>
<div class="row between">
<div class="col-8">...</div>
<div class="col-8">...</div>
</div>
</div>
It possible to alter the order of the colmumns using the last
or fist
classes. Notice that these classes are applied on the col
element.
<div class="container">
<div class="row">
<div class="col-8">1</div>
<div class="col-8">2</div>
<div class="col-8 first">3</div>
</div>
<div class="row">
<div class="col-8 last">1</div>
<div class="col-8">2</div>
<div class="col-8">3</div>
</div>
</div>
You can reverse the order of the columns by adding a reverse
class to the row
.
<div class="container">
<div class="row reverse">
<div class="col-8">1</div>
<div class="col-8">2</div>
<div class="col-8">3</div>
</div>
</div>