Container

The container centers your content horizontally. It's the most basic layout element.

While containers can be nested, most layouts do not require a nested container.

Fluid

A fluid container width is bounded by the maxWidth prop value.

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Container</span></span> <span class="token attr-name">maxWidth</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sm<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>

Fixed

If you prefer to design for a fixed set of sizes instead of trying to accommodate a fully fluid viewport, you can set the fixed prop. The max-width matches the min-width of the current breakpoint.

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Container</span></span> <span class="token attr-name">fixed</span><span class="token punctuation">></span></span>

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.

<Container />