容器(Container)

一个可以内容水平居中的简单容器

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.

对于不同断点的容器宽度是: $device - (2 * $gap). $gap 变量的值是 32px ,不过他是可以修改的。

容器的表现形式是:

  • $desktop 容器最大的宽度是 960px.
  • $widescreen 容器最大的宽度是 1152px.
  • $fullhd 容器最大的宽度是 1344px.

之所以选择 960, 1152 和 1344 ,是因为他们能被 12 和 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 #

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

You can use these variables to customize this element. Simply set one or multiple of these variables before importing Bulma. Learn how.

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