Components

Container

Centres page content and limits its width.

When to use

Container limits the widest size of page content and centres it. It wraps the main area of a page or the content of a section.

For a box and padding: Use Box when no width limit is needed.
To align items: Stack, Inline and Grid lay items out; Container only limits the width.
Nested: Do not put a Container inside another Container; the inline padding applies twice.

Container has one part: a <div> (or the element you give with render).

Root: limited by max-width, centred with mx-auto, with 16 px inline padding; 24 px from 1024 px.

The width is chosen with size: sm, md (default), lg or full.
When the parent is narrower than the limit, Container takes the parent width (w-full).
Inline padding changes from 16 px to 24 px at a 1024 px viewport width (the lg breakpoint).
It does not move and does not take focus.

Sample text

DoA narrow size (sm) for forms and text to read.

Sample text

Don'tA very wide size for long text: lines grow too long to read.

className is for block margins and padding only. When you need another width, change size.

Container shows no text of its own; its children decide the content. Use render for <main> and keep one per page.