Foundations

Layout and grid

Build responsive page structures with containers, the 12-column grid, flex utilities, and gaps.

Foundations guideCopy-ready referencev0.7.0 current

Foundations

Layout & grid

.bs-container centers content with a fluid gutter and a 90rem ceiling. Add a size modifier for narrower content. .bs-section provides fluid vertical rhythm.

Class	Maximum width
`.bs-container`	`--bs-container-2xl` · 90rem
`.bs-container-sm`	40rem
`.bs-container-md`	48rem
`.bs-container-lg`	64rem
`.bs-container-xl`	76rem

12-column grid

Use .bs-grid or its alias .bs-row, then assign column spans. Unprefixed columns work at every width; md begins at 48rem and lg at 64rem.

12 / md 6 / lg 4

12 / lg 4

HTML

<div class="bs-grid bs-gap-4">
  <div class="bs-col-12 bs-col-md-6 bs-col-lg-4">...</div>
  <div class="bs-col-12 bs-col-md-6 bs-col-lg-8">...</div>
</div>

Flex alignment and wrapping

Compose a responsive action row that keeps its label and controls aligned and wraps safely when space runs out.

HTML · Wrapping action row

<div class="bs-flex bs-flex-wrap bs-items-center bs-justify-between bs-gap-4">
  <div><strong>Project settings</strong><p class="bs-text-muted bs-text-sm bs-mb-0">Last saved two minutes ago</p></div>
  <div class="bs-flex bs-flex-wrap bs-gap-2">
    <button class="bs-btn bs-btn-secondary bs-btn-sm" type="button">Cancel</button>
    <button class="bs-btn bs-btn-primary bs-btn-sm" type="button">Save changes</button>
  </div>
</div>

Responsive display

The md display utilities apply from 48rem upward. Keep essential content available at every size.

Visible below the md breakpoint

Visible from the md breakpoint

HTML · Responsive visibility

<div class="bs-stack bs-gap-3">
  <div class="docs-utility-sample bs-block bs-md-hidden">Visible below the md breakpoint</div>
  <div class="docs-utility-sample bs-hidden bs-md-block">Visible from the md breakpoint</div>
</div>

Container

Use one container to establish page gutters and a readable maximum width. Nesting containers usually creates uneven alignment.

Grid

Start with .bs-col-12, then add only the breakpoint spans that materially change the composition.

Source order

Keep the DOM in its meaningful mobile reading order. Layout utilities should not create a visual order that disagrees with reading or focus order.