Container

A simple container to center your content horizontally

The .container class can be used in any context, but mostly as a direct child of either:

.navbar
.hero
.section
.footer

The container breakpoints have an offset defined by the $container-offset variable. It has a default value of 60px.

This is how the container will behave:

on $desktop + $container-offset = >= 1068px it will have a maximum width of 960px and will be horizontally centered.
on $widescreen + $container-offset = >= 1260px it will have a maximum width of 1152px.
on $fullhd + $container-offset = >= 1452px it will have a maximum width of 1344px.

The $gap variable has a default value of 24px but can be modified.

The values 960, 1152 and 1344 have been chosen because they are divisible by both 12 and 16.

This container is centered on desktop.

<div class="container">
  <div class="notification">
    This container is <strong>centered</strong> on desktop.
  </div>
</div>

Fluid container

If you don't want to have a maximum width but want to keep the 24px margin on the left and right sides, add the is-fluid modifier:

This container is fluid: it will have a 24px gap on either side, on any viewport size.

<div class="container is-fluid">
  <div class="notification">
    This container is <strong>fluid</strong>: it will have a 24px gap on either side, on any viewport size.
  </div>
</div>

Breakpoint containers

New! 0.4.4

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">
    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">
    This container is <strong>fullwidth</strong> <em>until</em> the <code>$fullhd</code> breakpoint.
  </div>
</div>

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

Bulma Partners

Check out their products!