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>


All 3 Columns 1 offset a Title and Content

<div class="row">
  <div class="col-md-1 hidden-sm hidden-xs">
  </div>
  <div class="col-md-3 col-sm-12">
    <h4>Title</h4>
  </div>
  <div class="col-md-8 col-sm-12">
    <p>Some example content....</p>
  </div>
</div>

Title

Some example content....