bulma/docs/documentation/layout/container.html

---
title: Container
layout: docs
theme: library
fullwidth: true
hide_categories: true
doc-tab: layout
doc-subtab: container
breadcrumb:
  - home
  - documentation
  - layout
  - layout-container
meta:
  colors: false
  sizes: true
  variables: true
---
{% capture container_example %}
<div class="container">
  <div class="notification is-primary">
    This container is <strong>centered</strong> on desktop and larger viewports.
  </div>
</div>
{% endcapture %}
{% capture container_fluid_example %}
<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>
{% endcapture %}
{% capture container_widescreen_example %}
<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>
{% endcapture %}
{% capture container_fullhd_example %}
<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>
{% endcapture %}
{% capture container_max_desktop_example %}
<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>
{% endcapture %}
{% capture container_max_widescreen_example %}
<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>
{% endcapture %}
{% assign bp_tablet = site.data.breakpoints.tablet %}
{% assign bp_desktop = site.data.breakpoints.desktop %}
{% assign bp_widescreen = site.data.breakpoints.widescreen %}
{% assign bp_fullhd = site.data.breakpoints.fullhd %}
{% assign container_offset = 64 %}
{% capture thead %}
<thead>
  <tr>
    <th class="bd-is-empty"></th>
    {% for breakpoint_hash in site.data.breakpoints %} {% assign breakpoint =
    breakpoint_hash[1] %} {% if breakpoint.id == 'tablet' %}
    <th>
      Below
      <br />
      <code>{{ bp_tablet.to }}px</code>
    </th>
    {% elsif breakpoint.id != 'mobile' %}
    <th>
      {{ breakpoint.name }}
      <br />
      {% if breakpoint.id == 'fullhd' %}
      <code>{{ breakpoint.from }}px</code> and above {% else %} Between
      <code>{{ breakpoint.from }}px</code> and
      <code>{{ breakpoint.to }}px</code>
      {% endif %}
    </th>
    {% endif %} {% endfor %}
  </tr>
</thead>
{% endcapture %}

<div class="content">
  <p>
    The <code>container</code> is a simple utility element that allows you to <strong>center</strong> content on larger
    viewports. It can be used in any context, but mostly as a <strong>direct child</strong> of one of the following:
  </p>
  <ul>
    <li><code>navbar</code></li>
    <li><code>hero</code></li>
    <li><code>section</code></li>
    <li><code>footer</code></li>
  </ul>
</div>

<!--  -->
{% include docs/elements/anchor.html name="Overview" %}

<div class="table-container">
  <table class="table is-bordered">
    <thead>
      <tr>
        {{ thead }}
      </tr>
      <tr>
        <th>Class</th>
        <th colspan="4" class="has-text-centered"><code>max-width</code></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><code>.container</code></td>
        <td class="has-text-grey-light has-background-white-ter">Full width</td>
        <td>
          <code>{{ bp_desktop.from | minus: container_offset }}px</code>
        </td>
        <td>
          <code>{{ bp_widescreen.from | minus: container_offset }}px</code>
        </td>
        <td>
          <code>{{ bp_fullhd.from | minus: container_offset }}px</code>
        </td>
      </tr>
      <tr>
        <td><code>.container.is-widescreen</code></td>
        <td colspan="2" class="has-text-grey-light has-background-white-ter">Full width</td>
        <td>
          <code>{{ bp_widescreen.from | minus: container_offset }}px</code>
        </td>
        <td>
          <code>{{ bp_fullhd.from | minus: container_offset }}px</code>
        </td>
      </tr>
      <tr>
        <td><code>.container.is-fullhd</code></td>
        <td colspan="3" class="has-text-grey-light has-background-white-ter">Full width</td>
        <td>
          <code>{{ bp_fullhd.from | minus: container_offset }}px</code>
        </td>
      </tr>
      <tr>
        <td><code>.container.is-max-desktop</code></td>
        <td class="has-text-grey-light has-background-white-ter">Full width</td>
        <td colspan="3">
          <code>{{ bp_desktop.from | minus: container_offset }}px</code>
        </td>
      </tr>
      <tr>
        <td><code>.container.is-max-widescreen</code></td>
        <td class="has-text-grey-light has-background-white-ter">Full width</td>
        <td>
          <code>{{ bp_desktop.from | minus: container_offset }}px</code>
        </td>
        <td colspan="2">
          <code>{{ bp_widescreen.from | minus: container_offset }}px</code>
        </td>
      </tr>
    </tbody>
  </table>
</div>

<!--  -->
{% include docs/elements/anchor.html name="Default behavior" %}

<div class="content">
  <p>
    By default, the <code>container</code> will only be activated from the <code>$desktop</code> breakpoint. It will
    increase its <code>max-width</code> after reaching the <code>$widescreen</code> and
    <code>$fullhd</code> breakpoints.
  </p>
  <p>
    The container's <strong>width</strong> for each <strong>breakpoint</strong> is the result of:
    <code>$device - (2 * $gap)</code>. The <code>$gap</code> variable has a default value of <code> 32px</code> but can
    be modified.
  </p>
  <p>This is how the container will behave:</p>
  <ul>
    <li>on <code>$desktop</code> it will have a maximum width of <strong>960px</strong>.</li>
    <li>on <code>$widescreen</code> it will have a maximum width of <strong>1152px</strong>.</li>
    <li>on <code>$fullhd</code> it will have a maximum width of <strong>1344px</strong>.</li>
  </ul>
  <p>
    The values <strong>960</strong>, <strong>1152</strong> and <strong>1344</strong> have been chosen because they are
    divisible by both <strong>12</strong> and <strong>16</strong>.
  </p>
</div>

<div class="bd-example is-fullwidth">{{ container_example }}</div>

{% highlight html -%}
{{- container_example -}}
{%- endhighlight %}

<!--  -->
{% include docs/elements/anchor.html name="Widescreen or FullHD only" %}

<div class="content">
  <p>
    With the two modifiers <code>is-widescreen</code> and <code>is-fullhd</code>, you can have a
    <em>fullwidth</em> container <strong>until</strong> those specific breakpoints.
  </p>
</div>

<div class="bd-example is-fullwidth">{{ container_widescreen_example }}</div>

{% highlight html -%}
{{- container_widescreen_example -}}
{%- endhighlight %}

<div class="bd-example is-fullwidth">{{ container_fullhd_example }}</div>

{% highlight html -%}
{{- container_fullhd_example -}}
{%- endhighlight %}

<!--  -->
{%
  include docs/elements/anchor.html name="Desktop and Widescreen maximum
  widths"
%}

<div class="content">
  <p>
    Sometimes, you might want a <strong>narrow</strong> container on larger viewports. That's why Bulma provides 2
    modifiers:
  </p>
  <ul>
    <li><code>.container.is-max-desktop</code> will behave like a desktop container</li>
    <li><code>.container.is-max-widescreen</code> will behave like a widescreen container</li>
  </ul>
</div>

<div class="bd-example is-fullwidth">{{ container_max_desktop_example }}</div>

{% highlight html -%}
{{- container_max_desktop_example -}}
{%- endhighlight %}

<div class="bd-example is-fullwidth">
  {{ container_max_widescreen_example }}
</div>

{% highlight html -%}
{{- container_max_widescreen_example -}}
{%- endhighlight %}

<!--  -->
{% include docs/elements/anchor.html name="Absolute maximum width" %}

<div class="content">
  <p>
    If you want to change the maximum width of <strong>all</strong> containers, you can do so by updating the values of
    the <code>$container-max-width</code> Sass variable.
  </p>
  <p>
    By default, the <code>$fullhd</code> breakpoint value is used to calculate the <strong>absolute</strong> maximum
    width of the <code>container</code>. Simply change it to a smaller value like <code>$widescreen</code>,
    <code>$desktop</code>, or any value in <strong>pixels</strong>.
  </p>
</div>

<!--  -->
{% include docs/elements/anchor.html name="Fluid container" %}

<div class="content">
  <p>
    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
    <code>is-fluid</code> modifier:
  </p>
</div>

<div class="bd-example is-fullwidth">{{ container_fluid_example }}</div>

{% highlight html -%}
{{- container_fluid_example -}}
{%- endhighlight %}
{%
  include docs/components/variables.html type='element'
  data=site.data.variables.elements.container
%}