The container is a simple utility element that allows you to center content on larger viewports. It can be used in any context, but mostly as a direct child of one of the following:
navbarherosectionfooter
--- title: Container layout: documentation hide_categories: true doc-tab: layout doc-subtab: container breadcrumb: - home - documentation - layout - layout-container meta: colors: false sizes: true variables: true --- {% capture container_example %}
$widescreen breakpoint.
$fullhd breakpoint.
max-width of $desktop - $container-offset on widescreen and fullhd.
max-width of $widescreen - $container-offset on fullhd.
{{ bp_tablet.to }}px
{{ breakpoint.from }}px and above
{% else %}
Between {{ breakpoint.from }}px and {{ breakpoint.to }}px
{% endif %}
The container is a simple utility element that allows you to center content on larger viewports. It can be used in any context, but mostly as a direct child of one of the following:
navbarherosectionfooter| Class | max-width |
|||
|---|---|---|---|---|
.container |
Full width | {{ bp_desktop.from | minus: container_offset }}px |
{{ bp_widescreen.from | minus: container_offset }}px |
{{ bp_fullhd.from | minus: container_offset }}px |
.container.is-widescreen |
Full width | {{ bp_widescreen.from | minus: container_offset }}px |
{{ bp_fullhd.from | minus: container_offset }}px |
|
.container.is-fullhd |
Full width | {{ bp_fullhd.from | minus: container_offset }}px |
||
| {% include elements/new-tag.html version="0.9.1" %} | ||||
.container.is-max-desktop |
Full width | {{ bp_desktop.from | minus: container_offset }}px |
||
.container.is-max-widescreen |
Full width | {{ bp_desktop.from | minus: container_offset }}px |
{{ bp_widescreen.from | minus: container_offset }}px |
|
By default, the container will only be activated from the $desktop breakpoint. It will increase its max-width after reaching the $widescreen and $fullhd breakpoints.
The container's width for each breakpoint is the result
of: $device - (2 * $gap). The $gap variable has a default value of
32px but can be modified.
This is how the container will behave:
$desktop it will have a maximum width of 960px.$widescreen it will have a maximum width of 1152px.$fullhd it will have a maximum width of 1344px.The values 960, 1152 and 1344 have been chosen because they are divisible by both 12 and 16.
With the two modifiers is-widescreen and is-fullhd, you can have a fullwidth container until those specific breakpoints.
Sometimes, you might want a narrow container on larger viewports. That's why Bulma provides 2 modifiers:
.container.is-max-desktop will behave like a desktop container
.container.is-max-widescreen will behave like a widescreen container
If you want to change the maximum width of all containers, you can do so by updating the values of the $container-max-width Sass variable.
By default, the $fullhd breakpoint value is used to calculate the absolute maximum width of the container. Simply change it to a smaller value like $widescreen, $desktop, or any value in pixels.
If you don't want to have a maximum width but want to keep the 32px margin on the left and
right sides, add the is-fluid modifier: