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
Sponsor
Container
A simple container to center your content horizontally
Overview #
|
Mobile
Between 0px and
768px
|
Tablet
Between 769px and
1023px
|
Desktop
Between 1024px and
1215px
|
Widescreen
Between 1216px and
1407px
|
FullHD
Between 1408px and
px
|
|
|---|---|---|---|---|---|
| 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
|
||
Default behavior #
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:
- on
$desktopit will have a maximum width of 960px. - on
$widescreenit will have a maximum width of 1152px. - on
$fullhdit 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.
This container is centered on desktop and larger viewports.
<div class="container">
<div class="notification is-primary">
This container is <strong>centered</strong> on desktop and larger viewports.
</div>
</div>Widescreen or FullHD only #
With the two modifiers is-widescreen and is-fullhd, you can have a
fullwidth container until those specific breakpoints.
This container is fullwidth until the
$widescreen breakpoint.
<div class="container is-widescreen">
<div class="notification is-primary">
This container is <strong>fullwidth</strong> <em>until</em> the
<code>$widescreen</code> breakpoint.
</div>
</div>
This container is fullwidth until the
$fullhd breakpoint.
<div class="container is-fullhd">
<div class="notification is-primary">
This container is <strong>fullwidth</strong> <em>until</em> the
<code>$fullhd</code> breakpoint.
</div>
</div>Desktop and Widescreen maximum widths #
Sometimes, you might want a narrow container on larger viewports. That's why Bulma provides 2 modifiers:
.container.is-max-desktopwill behave like a desktop container.container.is-max-widescreenwill behave like a widescreen container
This container has a
max-width of
$desktop - $container-offset on widescreen and fullhd.
<div class="container is-max-desktop">
<div class="notification is-primary">
This container has a <code>max-width</code> of
<code>$desktop - $container-offset</code> on widescreen and fullhd.
</div>
</div>
This container has a
max-width of
$widescreen - $container-offset on fullhd.
<div class="container is-max-widescreen">
<div class="notification is-primary">
This container has a <code>max-width</code> of
<code>$widescreen - $container-offset</code> on fullhd.
</div>
</div>Absolute maximum width #
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.
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, add the
is-fluid modifier:
This container is fluid: it will have a 32px gap on either
side, on any viewport size.
<div class="container is-fluid">
<div class="notification is-primary">
This container is <strong>fluid</strong>: it will have a 32px gap on either
side, on any viewport size.
</div>
</div>|
Sass Variable
|
CSS Variable
|
Value
|
|---|---|---|
|
|
|
|
|
|
Sass and CSS variables #
|
Sass Variable
|
CSS Variable
|
Value
|
|---|---|---|
|
|
|
|
|
|