Heads Up! Components & docs are subject to change until official v1.0 release.
×
Introduction:
Components:
Resources:
Grid System
Using xs, sm, md, lg, xl you can modify the grid system to adjust on small, medium, or large devices.
12
1
11
2
10
3
9
4
8
5
7
6
6
We recommend wrapping your grid inside a .container element to assist with content reflow.
<div class="container">
<!-- Your Code Here -->
<div class="row">
<div class="col-sm-12"></div>
</div>
</div>When adding the grid system to your project wrap your columns in a .row element. The following example is a basic row of columns ( .col-*-* ) that automatically adjust to different device sizes:
1
2
3
Note: You will need to resize your browser to view grid system changes.
<div class="row">
<div class="col-sm-12 col-md-1 col-lg-2 col-xl-4">1</div>
<div class="col-sm-12 col-md-3 col-lg-8 col-xl-4">2</div>
<div class="col-sm-12 col-md-8 col-lg-2 col-xl-4">3</div>
</div>