You are viewing the deprecated 0.5.1 version of the website. Click here to view the latest version

Documentation

Everything you need to create a website with Bulma

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

Bulma Newsletter

Get notified when v1 is ready!