Bootstrap Nested Columns

Nesting is placing a grid inside of another grid and it can be a powerful way of making complex layouts. To nest your content, add a new .row element inside of a .col element. A full 12 columns will now be available from within that one column.

<div class="container">
  <div class="row">
    <div class="col-sm-9">
      Outer Grid: .col-sm-9
      <div class="row">
        <div class="col-sm-6">
          Nested Grid: .col-sm-6
        </div>
        <div class="col-sm-6">
          Nested Grid: .col-sm-6
        </div>
      </div>
    </div>
    <div class="col-sm">
      Outer Grid: .col-sm
    </div>
  </div>
</div>