Layout Helpers

This section documents Bootstrap 5.x as implemented by the official Bootstrap project. No specific patch version is pinned. Unlike the other reference sections on this site, no single reference book underpins it: the content was generated with the assistance of AI from general knowledge of Bootstrap, and should be verified against the current official documentation at getbootstrap.com/docs before relying on it in production.

This section’s bibliography lists the reference material consulted while preparing these pages.

Bootstrap’s Grid System arranges content into rows and columns, and Utilities cover the single-property helper classes applied to any element. Layout helpers sit alongside both: a smaller set of concerns specific to arranging whole page regions — which layout model a container uses, whether a region is visible at a given breakpoint, and which region sits on top when several overlap. This page does not repeat the grid or utility classes themselves; it covers how these pieces combine into full-page layout.

Flexbox as the layout backbone

The grid is itself built on CSS Flexbox: a .row is display: flex; flex-wrap: wrap, and each .col- is a flex item with a computed flex-basis. This is why the flex utilities documented on Utilities (d-flex, justify-content-, align-items-, gap-) work seamlessly inside a grid layout as well as outside it — they are not a separate system bolted on, but the same mechanism the grid itself uses:

<div class="row">
  <div class="col-md-8 d-flex align-items-center">
    <!-- flex utilities inside a grid column, no conflict -->
    <img src="thumb.jpg" class="me-3" alt="" />
    <div>Vertically centered against the image, using the same flex utilities as elsewhere on the page.</div>
  </div>
  <div class="col-md-4">Sidebar</div>
</div>

A common pattern for full-page shells is a flex column with one growing region, using flex-grow-1 to push a footer to the bottom of the viewport regardless of content height:

<body class="d-flex flex-column min-vh-100">
  <header class="p-3">Site header</header>
  <main class="flex-grow-1 p-3">Main content -- grows to fill remaining space</main>
  <footer class="p-3 bg-light">Footer, always at the bottom</footer>
</body>

CSS Grid integration

Bootstrap 5.1 added an opt-in CSS Grid mode alongside the flexbox grid, using its own .grid/.g-col-/ .g-start- classes rather than .row/.col-. It is opt-in at the Sass level, not just a class a page can reach for: $enable-cssgrid defaults to false, so .grid and friends do not exist in the stock CDN bootstrap.min.css or the npm dist build at all — they only appear after setting $enable-cssgrid: true and recompiling from source (see Customization). .g-col-/.g-start- are also unrelated to the flexbox grid’s own .g- gutter classes (g-3, gx-2, and so on), which are in the default build — the shared g- prefix is a naming collision worth double-checking against, not a sign the two systems interoperate:

<div class="grid">
  <div class="g-col-6">Half width</div>
  <div class="g-col-3">Quarter</div>
  <div class="g-col-3">Quarter</div>
</div>

.g-col- sets grid-column: span N, and .g-start- positions an item at a specific starting column line for layouts that need explicit placement rather than sequential flow:

<div class="grid">
  <div class="g-col-4 g-start-3">Starts at column 3, spans 4</div>
</div>

This mode is deliberately narrower in scope than the full flexbox grid (no nesting or gutters system as rich as .row/.col), and is meant for CSS-Grid-native layouts — a photo mosaic, a dashboard of unevenly sized panels — rather than as a wholesale replacement for the flexbox grid documented in The Grid System.

.ratio for intrinsic aspect ratios

A layout helper worth calling out on its own: .ratio maintains an element’s aspect ratio as its width changes, using the CSS aspect-ratio box trick so an embedded video or map keeps its proportions responsively without JavaScript:

<div class="ratio ratio-16x9">
  <iframe src="https://www.example.com/video" title="Embedded video" allowfullscreen></iframe>
</div>

Bootstrap ships ratio-1x1, ratio-4x3, ratio-16x9, and ratio-21x9; an arbitrary ratio is set with an inline custom property, style="--bs-aspect-ratio: 75%;", on the .ratio element itself.

Responsive visibility and display

Whether a whole region is present at a given viewport width is handled by the same d-* display utilities covered on Utilities, applied at the layout-region level rather than to an individual inline element:

<nav class="d-none d-lg-flex">Full desktop navigation</nav>
<button class="btn d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#mobile-nav">
  Menu
</button>

<aside class="col-md-3 d-none d-md-block">Sidebar, hidden on narrow viewports</aside>
<main class="col-md-9">Main content, full width below md</main>

There is a second, narrower visibility mechanism worth distinguishing from d-none: the .visually-hidden class, which hides content visually while keeping it in the accessibility tree (screen readers still announce it). d-none removes an element from both the visual layout and the accessibility tree; the two are not interchangeable, and picking the wrong one either hides content from sighted users unnecessarily or hides it from assistive technology while leaving it visible. See Accessibility for more on .visually-hidden and its use with screen-reader-only text.

Positioning and stacking (z-index)

Layout regions that overlap — a fixed header above scrolling content, a modal above the page, a dropdown above a card — need a coherent stacking order, or a lower layer can visually leak through a higher one. Bootstrap defines a small, deliberately limited z-index scale via CSS custom properties, exposed through utility classes:

<header class="position-sticky top-0 z-3 bg-white border-bottom">Sticky header</header>
<div class="position-relative z-0">Base content layer</div>
<div class="position-absolute z-1">Slightly raised overlay</div>

z-n1, z-0, z-1, z-2, and z-3 cover the layering a typical page layout needs; Bootstrap’s own components (modals, dropdowns, tooltips, the fixed/sticky navbar) use a separate, higher internal z-index scale defined in Sass variables ($zindex-modal, $zindex-dropdown, $zindex-tooltip, and so on) specifically so that page-level content using the z-* utilities can never accidentally sit on top of a modal or dropdown. Mixing arbitrary inline z-index values into a layout instead of these scales is what usually causes a stacking bug — two unrelated parts of a page independently reaching for a large round number like 9999.

Combined with position-relative/position-absolute/position-fixed/position-sticky and the top-/ bottom-/start-/end- offset utilities (all covered on Utilities), z-* is normally the last piece needed to arrange overlapping page regions without a single line of custom CSS.

Where layout helpers stop and other pages start

This page intentionally stays at the level of arranging whole regions. For the column/row mechanics themselves — breakpoints, gutters, offsets, column ordering — see The Grid System. For every single-property class referenced above — d-flex, gap-3, position-sticky, top-0, z-3 — see Utilities, including how the whole set is generated and how to add project- specific ones via The Utility API.