The calculation of the container width is based on the viewport size of the device. This means that if a Container is used e.g. inside a Column stack, it will escape the boundaries.
We use cookies to offer you a better browsing experience, analyse traffic and personalise content. Read how we use your data in our privacy policy.
Container
A simple container to center your content horizontally
Concept
The Container stack can be used in any context, but mostly as a direct child of either:
This is how the container will behave:
- Hero stack
- Section stack
- Footer stack
device - (2 * gap). The gap variable has a default value of 64px but can be modified.This is how the container will behave:
- on desktop it will have a maximum width of 960px
- on widescreen it will have a maximum width of 1152px
- on full hd it will have a maximum width of 1344px
This container is centered on desktop.
Fluid Container
If you don't want to have a maximum width but want to keep the 32px margin on the left and right sides, check the fluid option:
This container is fluid: it will have a 64px gap on either side, on any viewport size.
Breakpoint Containers
The Breakpoint drop-down gives you two options: Widescreen and Full HD. These give you a fullwidth container until those specific breakpoints.
This container is fullwidth until the
widescreen breakpoint. Notice how it ignores the right boundary if your screen is big enough.
This container is fullwidth until the
full hd breakpoint. Notice how it ignores the right boundary if your screen is big enough.
Override Default Width
Sometimes you might want to override any breakpoints and give the container a specific width. This can be done by checking the Override Width option and entering a custom width in the field below.
This container is 200px wide.
