Grid

Basic

All columns need .col as base class. Their width can be set using modifier classes (e.g. .col-xs-6).

Column A
Column B
<div class="container">
  <div class="row">
    <div class="col col-xs-6">Column A</div>
    <div class="col col-xs-6">Column B</div>
  </div>
</div>

Responsive

Column A
Column B
<div class="container">
  <div class="row">
    <div class="col col-md-6 col-xl-9">Column A</div>
    <div class="col col-md-6 col-xl-3">Column B</div>
  </div>
</div>

Offset

Column A
Column B
<div class="container">
  <div class="row">
    <div class="col col-xs-5">
      Column A
    </div>
    <div class="col col-xs-5 col-xs-offset-2">
      Column B
    </div>
  </div>
</div>

Push / Pull

First column in markup
Second column in markup
<div class="container">
  <div class="row">
    <div class="col col-xs-6 col-xs-push-6">
      First column in markup
    </div>
    <div class="col col-xs-6 col-xs-pull-6">
      Second column in markup
    </div>
  </div>
</div>

Nested

Nested column A
Nested column B
<div class="container">
  <div class="row">
    <div class="col col-md-8">
      <div class="row">
        <div class="col col-md-6">
          Nested column A
        </div>
        <div class="col col-md-6">
          Nested column B
        </div>
      </div>
    </div>
  </div>
</div>