Grid

Composition

To use the grid you should wrap all columns inside a .row element. For a basic layout you probably would want the row to be inside a .container or .container-full to have some space around the columns.

For better understanding the horizontal padding is highlighted. The row has a negative margin.

container

row

.col-6

Columns

The grid has 3 breakpoints (sm 600px, md 800px, lg 1200) and 12 columns. It is designed to work mobile-first. You can set col-<1-12> and overwrite the behaviour with col-<breakpoint>-<1-12>.

.col-12.col-sm-6.col-md-4.col-md-2

<div class="row">
  <div class="col-12 col-sm-6 col-md-4 col-md-2">
  <div class="col-12 col-sm-6 col-md-4 col-md-2">
  <div class="col-12 col-sm-6 col-md-4 col-md-2">
  <div class="col-12 col-sm-6 col-md-4 col-md-2">
  <div class="col-12 col-sm-6 col-md-4 col-md-2">
  <div class="col-12 col-sm-6 col-md-4 col-md-2">
</div>

Offsets

Offsets are applied the same way. For example offset-md-2

.col-6.offset-md-2

.col-3

.col-3.offset-3

Margin-Auto

You can also use auto margin classes for the columns.

.col-12

.col-8.mx-auto