Skip to main content

Grid

Twelve Column Layout

6
6
4
4
4
3
3
3
3
2
2
2
2
2
2
1
1
1
1
1
1
1
1
1
1
1
1

<div class="container">
<div class="row">
<div class="col col--6">
<div class="col-demo">6</div>
</div>
<div class="col col--6">
<div class="col-demo">6</div>
</div>
</div>
<div class="row">
<div class="col col--4">
<div class="col-demo">4</div>
</div>
<div class="col col--4">
<div class="col-demo">4</div>
</div>
<div class="col col--4">
<div class="col-demo">4</div>
</div>
</div>
<div class="row">
<div class="col col--3">
<div class="col-demo">3</div>
</div>
<div class="col col--3">
<div class="col-demo">3</div>
</div>
<div class="col col--3">
<div class="col-demo">3</div>
</div>
<div class="col col--3">
<div class="col-demo">3</div>
</div>
</div>
<div class="row">
<div class="col col--2">
<div class="col-demo">2</div>
</div>
<div class="col col--2">
<div class="col-demo">2</div>
</div>
<div class="col col--2">
<div class="col-demo">2</div>
</div>
<div class="col col--2">
<div class="col-demo">2</div>
</div>
<div class="col col--2">
<div class="col-demo">2</div>
</div>
<div class="col col--2">
<div class="col-demo">2</div>
</div>
</div>
<div class="row">
<div class="col col--1">
<div class="col-demo">1</div>
</div>
<div class="col col--1">
<div class="col-demo">1</div>
</div>
<div class="col col--1">
<div class="col-demo">1</div>
</div>
<div class="col col--1">
<div class="col-demo">1</div>
</div>
<div class="col col--1">
<div class="col-demo">1</div>
</div>
<div class="col col--1">
<div class="col-demo">1</div>
</div>
<div class="col col--1">
<div class="col-demo">1</div>
</div>
<div class="col col--1">
<div class="col-demo">1</div>
</div>
<div class="col col--1">
<div class="col-demo">1</div>
</div>
<div class="col col--1">
<div class="col-demo">1</div>
</div>
<div class="col col--1">
<div class="col-demo">1</div>
</div>
<div class="col col--1">
<div class="col-demo">1</div>
</div>
</div>
</div>

Equal-width

col
col
col
col
col

<div class="container">
<div class="row">
<div class="col">
<div class="col-demo">col</div>
</div>
<div class="col">
<div class="col-demo">col</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="col-demo">col</div>
</div>
<div class="col">
<div class="col-demo">col</div>
</div>
<div class="col">
<div class="col-demo">col</div>
</div>
</div>
</div>

Column Offsets

col--1
col--2 col--offset-1
col--3 col--offset-2
col--2
col--2 col--offset-2
col--4 col--offset-2
col--3
col--6 col--offset-3

<div class="container">
<div class="row">
<div class="col col--1">
<div class="col-demo">col--1</div>
</div>
<div class="col col--2 col--offset-1">
<div class="col-demo">col--2 col--offset-1</div>
</div>
<div class="col col--3 col--offset-2">
<div class="col-demo">col--3 col--offset-2</div>
</div>
</div>
<div class="row">
<div class="col col--2">
<div class="col-demo">col--2</div>
</div>
<div class="col col--2 col--offset-2">
<div class="col-demo">col--2 col--offset-2</div>
</div>
<div class="col col--4 col--offset-2">
<div class="col-demo">col--4 col--offset-2</div>
</div>
</div>
<div class="row">
<div class="col col--3">
<div class="col-demo">col--3</div>
</div>
<div class="col col--6 col--offset-3">
<div class="col-demo">col--6 col--offset-3</div>
</div>
</div>
</div>

No Gutters

col
col
col
col
col
col--3
col--4
col--5

<div class="container">
<div class="row row--no-gutters">
<div class="col">
<div class="col-demo">col</div>
</div>
<div class="col">
<div class="col-demo">col</div>
</div>
</div>
<div class="row row--no-gutters">
<div class="col">
<div class="col-demo">col</div>
</div>
<div class="col">
<div class="col-demo">col</div>
</div>
<div class="col">
<div class="col-demo">col</div>
</div>
</div>
<div class="row row--no-gutters">
<div class="col col--3">
<div class="col-demo">col--3</div>
</div>
<div class="col col--4">
<div class="col-demo">col--4</div>
</div>
<div class="col col--5">
<div class="col-demo">col--5</div>
</div>
</div>
</div>