Nesting

Nesting

To subdivide a column, put a new .row inside it. The nested row has 12 units of the parent column's width, and its negative margins cancel the parent's padding so nested content lines up with the parent's content edges.

Offsets, auto margins and a nested rowHTMLLive

<link rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
<style>[class^="col"] { border: 1px solid #1565c0; background: #e3f2fd; }</style>
<div class="container text-center py-2">
  <div class="row mb-2">
    <div class="col-4">col-4</div><div class="col-4 offset-4">col-4 offset-4</div>
  </div>
  <div class="row">
    <div class="col-sm-8">col-sm-8
      <div class="row">
        <div class="col-auto bg-white">nested col-auto</div>
        <div class="col-auto ms-auto bg-white">col-auto ms-auto</div>
      </div>
    </div>
    <div class="col-sm-4">col-sm-4</div>
  </div>
</div>

Browser output of Listing 3.7 — Browser output of 7

Never nest a .container inside another; the padding doubles. Past two levels, consider CSS Grid mode.

MENU