PRIMARY PAGE HEADER

Grid

The grid is build with rows cintaining columns of width clusters of 1/12, just like Bootstrap.

It is also responsive using the breakpoints like .col-sm-1, .col-lg-6.

For more info about using the grid, see the Bootstrap page.

.col
.col
.col-2
.col-6
.col-4
.col
.col-8
.col
.col
.col
.col
.col
.col
.col
.col
.col
.col
.col
.col
<div class="row">
<div class="col bg-primary text-white">.col</div>
<div class="col bg-secondary text-white">.col</div>
</div>

<div class="row">
<div class="col-2 bg-primary text-white">.col-2</div>
<div class="col-6 bg-secondary text-white">.col-6</div>
<div class="col-4 bg-primary text-white">.col-4</div>
</div>

<div class="row">
<div class="col bg-primary text-white">.col</div>
<div class="col-8 bg-secondary text-white">.col-8</div>
</div>

<div class="row">
<div class="col bg-primary text-white">.col</div>
<div class="col bg-secondary text-white">.col</div>
<div class="col bg-primary text-white">.col</div>
<div class="col bg-secondary text-white">.col</div>
<div class="col bg-primary text-white">.col</div>
<div class="col bg-secondary text-white">.col</div>
<div class="col bg-primary text-white">.col</div>
<div class="col bg-secondary text-white">.col</div>
<div class="col bg-primary text-white">.col</div>
<div class="col bg-secondary text-white">.col</div>
<div class="col bg-primary text-white">.col</div>
<div class="col bg-secondary text-white">.col</div>
</div>