Container
Limit the width of the page and center its content. Put a Row inside it to build the layout. See the page structure guide.
General
The Container has a maximum width and grows with the window until it.
Fluid
A fluid Container has no maximum width.
APIs
Container.Props
| Attribute | Description | Type | Accepted values | Default |
|---|---|---|---|---|
| fluid | remove the maximum width | boolean | - | false |
| justify | horizontal alignment, when the Container is a flex box | string | start, end, center, space-around, space-between | start |
| align | vertical alignment, when the Container is a flex box | string | top, middle, bottom | top |
| component | the element to render | keyof JSX.IntrinsicElements | 'div', 'main', 'section', ... | div |
| ... | native props | HTMLAttributes | 'id', 'className', ... | - |
justify and align only have an effect when you make the Container a flex box, for example with style={{ display: 'flex' }}.
Ref
The ref points at the root element.