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>