Container

Examples

Basic

Overview

The container centers this column and spaces the sections within it.

Activity

A second section, evenly spaced from the first.

Vanilla CSS

<div class="container">
  <div class="card">
    <div class="card-body">
      <h3 class="card-title">Overview</h3>
      <p class="card-description">
        The container centers this column and spaces the sections within it.
      </p>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      <h3 class="card-title">Activity</h3>
      <p class="card-description">
        A second section, evenly spaced from the first.
      </p>
    </div>
  </div>
</div>

React

<Container>
  <Card
    title="Overview"
    description="The container centers this column and spaces the sections within it."
  />
  <Card
    title="Activity"
    description="A second section, evenly spaced from the first."
  />
</Container>

Sizes

A cap only takes effect once the viewport is wider than it, so in this narrow preview they all fill the available width.

sm — 60rem

lg — 115rem

fluid — no cap

Vanilla CSS

<div class="container container-sm">
  <div class="card">
    <div class="card-body"><h3 class="card-title">sm — 60rem</h3></div>
  </div>
</div>
<div class="container container-lg">
  <div class="card">
    <div class="card-body"><h3 class="card-title">lg — 115rem</h3></div>
  </div>
</div>
<div class="container container-fluid">
  <div class="card">
    <div class="card-body"><h3 class="card-title">fluid — no cap</h3></div>
  </div>
</div>

React

<>
  <Container size="sm">
    <Card title="sm — 60rem" />
  </Container>
  <Container size="lg">
    <Card title="lg — 115rem" />
  </Container>
  <Container size="fluid">
    <Card title="fluid — no cap" />
  </Container>
</>

Compact

Tighter rhythm

Less air between sections

Vanilla CSS

<div class="container container-compact">
  <div class="card">
    <div class="card-body"><h3 class="card-title">Tighter rhythm</h3></div>
  </div>
  <div class="card">
    <div class="card-body">
      <h3 class="card-title">Less air between sections</h3>
    </div>
  </div>
</div>

React

<Container compact>
  <Card title="Tighter rhythm" />
  <Card title="Less air between sections" />
</Container>

Custom width

Release notes

Capped at 40rem and centered in the available space.

Vanilla CSS

<div class="container" style="--container-max: 40rem">
  <div class="card">
    <div class="card-body">
      <h3 class="card-title">Release notes</h3>
      <p class="card-description">
        Capped at 40rem and centered in the available space.
      </p>
    </div>
  </div>
</div>

React

<Container style={{ "--container-max": "40rem" }}>
  <Card
    title="Release notes"
    description="Capped at 40rem and centered in the available space."
  />
</Container>

In an app shell

A Acme

Settings

The container gives main its width cap, padding, and section spacing.

Vanilla CSS

<div
  class="app-shell"
  style="min-height: 16rem; --color-system-accent: var(--color-purple-600)"
>
  <header class="navbar">
    <div class="navbar-brand">
      <span class="brand-tile" aria-hidden>A</span>
      Acme
    </div>
  </header>
  <main class="app-shell-main">
    <div class="container container-sm">
      <div class="card">
        <div class="card-body">
          <h3 class="card-title">Settings</h3>
          <p class="card-description">
            The container gives main its width cap, padding, and section
            spacing.
          </p>
        </div>
      </div>
    </div>
  </main>
</div>

React

<AppShell
  systemAccent="var(--color-purple-600)"
  style={{ minHeight: "16rem" }}
>
  <Navbar>
    <Navbar.Brand>
      <BrandTile monogram="A" />
      Acme
    </Navbar.Brand>
  </Navbar>
  <AppShell.Main>
    <Container size="sm">
      <Card
        title="Settings"
        description="The container gives main its width cap, padding, and section spacing."
      />
    </Container>
  </AppShell.Main>
</AppShell>

Reference

React

Prop	Type	Default
size	"sm" | "md" | "lg" | "fluid"	"md"
compact	boolean	false

Plus native <div> attributes. <Container> is a standalone page region, not the .Container escape hatch that compound components expose.

Vanilla

Class / var	Effect
container	Centered column: 90rem cap, 1.5rem padding (1rem side padding under 48rem), 1.5rem gap between children
container-sm	60rem cap — forms, settings
container-lg	115rem cap — wide tables, dashboards
container-fluid	No cap
container-compact	1rem gap and block padding
--container-max	The cap itself, 90rem by default. Every preset above just sets this

Children stack with the container’s gap, so the space between cards comes from the container. Widths run wide for admin screens. Goes inside app-shell-main, which has no padding of its own.