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:
navbar
hero
section
footer
Container
A simple container to center your content horizontally
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:
navbar
hero
section
footer
Below
1023px
|
Desktop
Between 1024px and
1215px
|
Widescreen
Between 1216px and
1407px
|
FullHD
1408px and above
|
|
---|---|---|---|---|
Class | max-width |
|||
.container |
Full width |
960px
|
1152px
|
1344px
|
.container.is-widescreen |
Full width |
1152px
|
1344px
|
|
.container.is-fullhd |
Full width |
1344px
|
||
.container.is-max-desktop |
Full width |
960px
|
||
.container.is-max-widescreen |
Full width |
960px
|
1152px
|
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.
$widescreen
breakpoint.
$fullhd
breakpoint.
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 containermax-width
of
$desktop - $container-offset
on widescreen and fullhd.
max-width
of
$widescreen - $container-offset
on fullhd.
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:
Sass Variable
|
CSS Variable
|
Value
|
---|---|---|
Sass Variable
|
CSS Variable
|
Value
|
---|---|---|