Resetting Bootstrap grid max-width inside nested columns

Nested columns that refuse to fill their parent

You place a .row inside a .col, which sits inside a .container. The inner columns look right on a wide screen, but at the md breakpoint they suddenly appear narrower than the outer column, or they wrap early. The symptom is usually a gap on the right side of the nested block or an unexpected vertical stack.

Container max-width tiers sync with grid breakpoints

Bootstrap’s .container is not one fixed width. It applies a max-width that changes at each breakpoint: roughly 576px at sm, 768px at md, 992px at lg, and 1200px at xl. Below sm there is no max-width, so the container stretches full width. Because column widths are percentages calculated inside that capped width, a nested .row inherits the outer container’s ceiling unless something resets it.

Worked example: a nested row inside a column

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="row">
        <div class="col-6">Inner left</div>
        <div class="col-6">Inner right</div>
      </div>
    </div>
  </div>
</div>

At md and above, the outer .col-md-6 is 50% of the container’s capped width. The inner .row has negative margins that offset the outer column’s padding, but its .col-6 children still calculate 50% of that inner row. If the outer container is capped at 768px, the inner columns are 50% of 768px minus gutters, not 50% of the full viewport. That is usually correct, but it surprises developers who expect the nested block to stretch to the edge of the outer column at every tier.

Reset with a breakpoint-specific container

This assumes Bootstrap 5, which introduced breakpoint-specific containers such as .container-sm. Bootstrap 4 only offers .container and .container-fluid. If the nested columns need their own max-width context—for example, to match a different container tier or to use fluid width inside the column—wrap the inner .row in a container sized for that breakpoint.

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="container-sm">
        <div class="row">
          <div class="col-6">Inner left</div>
          <div class="col-6">Inner right</div>
        </div>
      </div>
    </div>
  </div>
</div>

.container-sm applies the sm max-width (576px) to the inner row regardless of the outer breakpoint. Use .container-fluid if the inner row should be 100% of the outer column’s width without a tier cap. Note that neither escapes the outer .container: a nested container can only be equal to or narrower than its parent.

Limitation: nesting cannot break out of the outer container

A common mistake is placing .container-fluid inside .container expecting full-bleed width. It does not work; .container-fluid is still a child of the capped outer container, so it fills only that capped width. For true full-bleed bands, move the section outside .container or use a dedicated wrapper with negative margins, which adds complexity and maintenance risk.

Verify with devtools

1. Open the page in Chrome or Firefox and open DevTools.
2. Select the outer .container and check the Computed tab. Resize the browser to 768px and confirm max-width snaps to 768px.
3. Select an inner .col-6 and check its computed width at the same breakpoint. It should be half of the inner row’s width, minus gutters.
4. If you added .container-sm, confirm the inner row’s max-width is 576px even when the viewport is wider.

Treat each nesting level as a separate layout context. When the visual result does not match the markup, check the computed max-width at every level before adding custom CSS.