Back

Grid Layout Cheetsheet

Cheetsheet for different 12 column layouts

Here are a range of 12 column layout examples

3 Columns

<div class="row">
  <div class="col-md-4">
  </div>
  <div class="col-md-4">
  </div>
  <div class="col-md-4">
  </div>
</div>

3 Columns - Displaced

<div class="row">
  <div class="col-md-4">
    <div class="row">
      <div class="col-md-10 col-md-offset-1">
      </div>
    </div>
  </div>

  <div class="col-md-4">
    <div class="row">
      <div class="col-md-10 col-md-offset-1">
      </div>
    </div>
  </div>

  <div class="col-md-4">
    <div class="row">
      <div class="col-md-10 col-md-offset-1">
      </div>
    </div>
  </div>
</div>

3 Columns - Displaced More

<div class="row">
  <div class="col-md-4">
    <div class="row">
      <div class="col-md-8 col-md-offset-2">
      </div>
    </div>
  </div>

  <div class="col-md-4">
    <div class="row">
      <div class="col-md-8 col-md-offset-2">
      </div>
    </div>
  </div>

  <div class="col-md-4">
    <div class="row">
      <div class="col-md-8 col-md-offset-2">
      </div>
    </div>
  </div>
</div>

4 Columns

<div class="row">
  <div class="col-md-3">
  </div>
  <div class="col-md-3">
  </div>
  <div class="col-md-3">
  </div>
  <div class="col-md-3">
  </div>
</div>

4 Columns - Displaced

<div class="row">
  <div class="col-md-3">
    <div class="row">
      <div class="col-md-10 col-md-offset-1">
      </div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="row">
      <div class="col-md-10 col-md-offset-1">
      </div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="row">
      <div class="col-md-10 col-md-offset-1">
      </div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="row">
      <div class="col-md-10 col-md-offset-1">
      </div>
    </div>
  </div>
</div>

2 Columns 1:1

<div class="row">
  <div class="col-md-6">
  </div>
  <div class="col-md-6">
  </div>
</div>

2 Columns 1:1 Displaced

<div class="row">
  <div class="col-md-6">
    <div class="row">
      <div class="col-md-10 col-md-offset-1">
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="row">
      <div class="col-md-10 col-md-offset-1">
      </div>
    </div>
  </div>
</div>

2 Columns 1:1 Displaced More

<div class="row">
  <div class="col-md-6">
    <div class="row">
      <div class="col-md-8 col-md-offset-2">
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="row">
      <div class="col-md-8 col-md-offset-2">
      </div>
    </div>
  </div>
</div>

2 Columns 1:3

<div class="row">
  <div class="col-md-3">
  </div>
  <div class="col-md-9">
  </div>
</div>

2 Columns 1:2

<div class="row">
  <div class="col-md-4">
  </div>
  <div class="col-md-8">
  </div>
</div>

All 12 Columns

<div class="row">
  <div class="col-md-1">
  </div>
  <div class="col-md-1">
  </div>
  <div class="col-md-1">
  </div>
  <div class="col-md-1">
  </div>
  <div class="col-md-1">
  </div>
  <div class="col-md-1">
  </div>
  <div class="col-md-1">
  </div>
  <div class="col-md-1">
  </div>
  <div class="col-md-1">
  </div>
  <div class="col-md-1">
  </div>
  <div class="col-md-1">
  </div>
  <div class="col-md-1">
  </div>
</div>