πŸŽ‰ Bulma v1 is coming soon!

and much more…

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

Overview #

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
Since 0.9.1
.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 $desktop it will have a maximum width of 960px.
  • on $widescreen it will have a maximum width of 1152px.
  • on $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.

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 #

Since 0.9.1

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
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>

Variables #

Name
Type
Value
Computed Value
Computed Type
$container-offset
compound
(2 * $gap)
$container-max-width
variable
$fullhd
1344px + (2 * $gap)
computed

Made with Bulma This page is open source. Noticed a typo? Or something unclear?
Improve this page on GitHub

#native_company# #native_desc#
#native_cta#