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">6</div> <div class="col col--6">6</div> </div> <div class="row"> <div class="col col--4">4</div> <div class="col col--4">4</div> <div class="col col--4">4</div> </div> <div class="row"> <div class="col col--3">3</div> <div class="col col--3">3</div> <div class="col col--3">3</div> <div class="col col--3">3</div> </div> <div class="row"> <div class="col col--2">2</div> <div class="col col--2">2</div> <div class="col col--2">2</div> <div class="col col--2">2</div> <div class="col col--2">2</div> <div class="col col--2">2</div> </div> <div class="row"> <div class="col col--1">1</div> <div class="col col--1">1</div> <div class="col col--1">1</div> <div class="col col--1">1</div> <div class="col col--1">1</div> <div class="col col--1">1</div> <div class="col col--1">1</div> <div class="col col--1">1</div> <div class="col col--1">1</div> <div class="col col--1">1</div> <div class="col col--1">1</div> <div class="col col--1">1</div> </div></div>Equal-width#
col
col
col
col
col
<div class="container"> <div class="row"> <div class="col">col</div> <div class="col">col</div> </div> <div class="row"> <div class="col">col</div> <div class="col">col</div> <div class="col">col</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">col--1</div> <div class="col col--2 col--offset-1">col--2 col--offset-1</div> <div class="col col--3 col--offset-2">col--3 col--offset-2</div> </div> <div class="row"> <div class="col col--2">col--2</div> <div class="col col--2 col--offset-2">col--2 col--offset-2</div> <div class="col col--4 col--offset-2">col--4 col--offset-2</div> </div> <div class="row"> <div class="col col--3">col--3</div> <div class="col col--6 col--offset-3">col--6 col--offset-3</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">col</div> <div class="col">col</div> </div> <div class="row row--no-gutters"> <div class="col">col</div> <div class="col">col</div> <div class="col">col</div> </div> <div class="row row--no-gutters"> <div class="col col--3">col--3</div> <div class="col col--4">col--4</div> <div class="col col--5">col--5</div> </div></div>