Container

Content wrapper with max-width and inline padding. Centers page content with consistent margins.

Default

Content within a container

Base

Class	Description
`.ui-container`	Base class

Center

Class	Description
`.ui-container--center`	center

Size

Class	Value
`.ui-container--sm`	sm
`.ui-container--md`	md
`.ui-container--lg`	lg
`.ui-container--xl`	xl
`.ui-container--full`	full

Centered

Centered container

<!-- Centers the container horizontally with auto margins. -->
<div class="ui-container ui-container--center ui-bg-muted">
  <p>Centered container</p>
</div>

Sizes

Small

Medium

Large (default)

Extra large

Full width

<!-- Width presets for different layout needs. -->
<div class="ui-container ui-container--sm ui-container--center ui-bg-muted">
  <p>Small</p>
</div>
<div class="ui-container ui-container--md ui-container--center ui-bg-muted">
  <p>Medium</p>
</div>
<div class="ui-container ui-container--lg ui-container--center ui-bg-muted">
  <p>Large (default)</p>
</div>
<div class="ui-container ui-container--xl ui-container--center ui-bg-muted">
  <p>Extra large</p>
</div>
<div class="ui-container ui-container--full ui-bg-muted">
  <p>Full width</p>
</div>