Grid

The grid system provides us with a device agnostic layout system.

Class reference

Class
Output
.container

Sets width and centers outermost div

.row

Aligns children columns

.col

Set width of individual column

Grid construction

A basic grid is constructed out of three elements, .container, .row and .col

col-12
col-12
<div class="container">
  <div class="row">
    <div class="col-12">...</div>
    <div class="col-12">...</div>
  </div>
</div>

Grid combinations

A 24 column grid allows us to make a varied range of layouts. These are some of the possible layouts.

1
col-23
col-2
col-22
col-3
col-21
col-4
col-20
col-5
col-19
col-6
col-18
col-7
col-17
col-8
col-16
col-9
col-15
col-10
col-14
col-11
col-13
col-12
col-12
<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>

Offset columns

It's possible to leave some some columns empty. The syntax for that is col-offest-{number}

col-8
col-12 (offset by 4 columns)
<div class="container">
  <div class="row">
    <div class="col-8">...</div>
    <div class="col-12 col-offset-4">...</div>
  </div>
</div>

Alignment

Add classes to align elements to the start, end and center of the row. Notice that these classes are applied on the row element.

col-8
col-8
col-8
<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>

Distribution

Add the around or between classes to distribute the contents of the row. Notice that these classes are applied on the row element.

col-8
col-8
col-8
col-8
<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>

Ordering

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.

1
2
3
1
2
3
<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>

Reversing

You can reverse the order of the columns by adding a reverse class to the row.

1
2
3
<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>
Back to: Float
See next: Opacity

CONTENTS