How to nest rows and columns in the Bootstrap grid? (Advanced Layouts)

Bootstrap's grid system supports nesting rows within columns to build multi-level layouts. Nested rows need to be placed in columns and margins reset. Child columns are divided by the width of the parent column rather than the width of the container, and more than 2–3 levels of nesting should be avoided.

Bootstrap's grid system lets you nest rows inside columns to build complex, multi-level layouts—just remember that every nested row must be placed inside a column , and each row should be wrapped in a .container or .container-fluid .

How nesting works in Bootstrap

Nesting means putting a .row inside a .col-* (eg, inside .col-md-8 ). That inner row automatically resets the gutter and gives you a fresh 12-column grid context—starting from zero padding and full width of its parent column.

• Parent column sets available width (eg, .col-lg-6 = ~50% of its container)
• Inside it, a .row adds negative margins to offset column gutters
• Then child .col-* s inside that row divide *that parent column's width*, not the whole container's

Basic nesting example

Here's a common case: a two-column layout where the right column contains a stacked 2-row section.

 <div class="container">
  <div class="row">
    <div class="col-md-4">Sidebar</div>
    <div class="col-md-8">
      <!-- Nested row starts here -->
      <div class="row">
        <div class="col-12 col-sm-6">Top content</div>
        <div class="col-12 col-sm-6">Side panel</div>
      </div>
      <div class="row mt-3">
        <div class="col-12">Full-width footer section</div>
      </div>
    </div>
  </div>
</div>

Key rules to avoid layout breaks

Break the grid? Usually because of one of these:

• Never put a .row directly inside another .row — always wrap it in a .col-* first
• Don't skip columns: if you use .col-4 , the next sibling should start a new row or continue with proper column sizing
• Use .no-gutters on a nested row only if you truly want zero spacing — but remember it removes padding from child columns too
• On small screens, nested columns may stack vertically — test responsiveness by checking how inner .col-sm-6 behaves when screen shrinks

When to consider alternatives

Nesting gets tricky beyond 2–3 levels. If your layout feels brittle or requires excessive overrides:

• Try utility classes like .d-flex , .flex-column , or .gap-3 for simpler inner arrangements
• Use CSS Grid for highly custom sections (Bootstrap 5 plays nicely alongside it)
• Break complex cards or modules into standalone components with their own internal grid

Basically just remember: row → column → (row → column) → repeat. Keep it shallow, test breakpoints, and let the grid do the math.

The above is the detailed content of How to nest rows and columns in the Bootstrap grid? (Advanced Layouts). For more information, please follow other related articles on the PHP Chinese website!