Container

A simple container to center your content horizontally

Colors No

Sizes Yes

Variables Yes

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`
New! 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.

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

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

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

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

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

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

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