Center content with padding and max-width
Starting from 8.2.0, Container supports the strategy="grid" prop which enables more features.
Differences from the default strategy="block" :
Features supported by strategy="grid" :
Example of using breakout feature:
Container centers content and limits its max-width to the value specified in the size prop. Note that the size prop does not make max-width responsive. For example, when it is set to lg it will always be lg regardless of screen size.
Set the fluid prop to make the container fluid. It will take 100% of available width, which is the same as setting size="100%" .
You can customize existing Container sizes and add new ones with CSS variables on theme :
To make Container max-width responsive, use Styles API to set classNames . For example, you can add a responsive size that will make the Container max-width different depending on screen size: