Grid - nesting

A column can hold a row of its own. The inner row divides the column into 12 parts again.

Code

<div class="row">
  <div class="col-8">
Outer column, 8 parts
    <div class="row">
      <div class="col-6">Inner column, 6 parts</div>
      <div class="col-6">Inner column, 6 parts</div>
    </div>
  </div>
  <div class="col-4">Outer column, 4 parts</div>
</div>

Result

Outer column, 8 parts

Inner column, 6 parts

Inner column, 6 parts

Outer column, 4 parts

This wiki contains content from the Bootstrap homepage, licensed Commons Attribution 3.0 Unported (CC BY 3.0). Thank you to everyone for creating outstanding content!