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

Tablet, Desktop and Widescreen maximum widths #

Sometimes, you might want a narrow container on larger viewports. That's why Bulma provides 3 modifier classes:

.container.is-max-tablet will behave like a tablet container
.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 $tablet - $container-offset.

<div class="container is-max-tablet">
  <div class="notification is-primary">
    This container has a <code>max-width</code> of
    <code>$tablet - $container-offset</code>.
  </div>
</div>

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 and CSS variables #

Sass Variable	Value
`$container-offset`	`64px`
`$container-max-width`	`1408px`

Start Here

Features

Sass Tools

Customization

CSS Library

CSS Helpers