Grid System
Container grid
We have 2 kinds of container:
-
.containerfor fixed width layout and -
.container-fluidfor full-width layout
12 columns grid
Use our set of class .cols-* (from .cols-1 to .cols-12), as shown below:
.cols-1
.cols-1
.cols-1
.cols-1
.cols-1
.cols-1
.cols-1
.cols-1
.cols-1
.cols-1
.cols-1
.cols-1
.cols-12
.cols-1
.cols-11
.cols-2
.cols-10
.cols-3
.cols-9
.cols-4
.cols-8
.cols-5
.cols-7
.cols-6
.cols-6
Notice:
We should use the class .row for each multi-columns row.
<div class="container-fluid">
<div class="row">
<div class="cols-1">.cols-1</div>
<div class="cols-1">.cols-1</div>
...
</div>
<div class="row">
<div class="cols-12">.cols-12</div>
</div>
<div class="row">
<div class="cols-1">.cols-1</div>
<div class="cols-11">.cols-11</div>
</div>
</div>