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>