---
title: Container
layout: documentation
doc-tab: layout
doc-subtab: container
---

{% capture container_example %}
<div class="container">
  <div class="notification">
    This container is <strong>centered</strong> on desktop.
  </div>
</div>
{% endcapture %}

{% capture container_fluid_example %}
<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>
{% endcapture %}

{% capture container_widescreen_example %}
<div class="container is-widescreen">
  <div class="notification">
    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">
    This container is <strong>fullwidth</strong> <em>until</em> the <code>$fullhd</code> breakpoint.
  </div>
</div>
{% endcapture %}

{% include subnav-layout.html %}

<section class="section">
  <div class="container">
    <h1 class="title">Container</h1>
    <h2 class="subtitle">
      A simple <strong>container</strong> to center your content horizontally
    </h2>

    <hr>

    <div class="content">
      <p>The <code>.container</code> class can be used in any context, but mostly as a <strong>direct child</strong> of either:</p>
      <ul>
        <li><code>.navbar</code></li>
        <li><code>.hero</code></li>
        <li><code>.section</code></li>
        <li><code>.footer</code></li>
      </ul>
      <p>
        The container <strong>breakpoints</strong> have an <strong>offset</strong> defined by the <code>$container-offset</code> variable. It has a default value of <code>60px</code>.
      </p>
      <p>This is how the container will behave:</p>
      <ul>
        <li>on <code>$desktop</code> + <code>$container-offset</code> = <code>>= 1068px</code> it will have a maximum width of <strong>960px</strong> and will be <strong>horizontally centered</strong>.</li>
        <li>on <code>$widescreen</code> + <code>$container-offset</code> = <code>>= 1260px</code> it will have a maximum width of <strong>1152px</strong>.</li>
        <li>on <code>$fullhd</code> + <code>$container-offset</code> = <code>>= 1452px</code> it will have a maximum width of <strong>1344px</strong>.</li>
      </ul>
      <p>
        The <code>$gap</code> variable has a default value of <code>24px</code> but can be modified.
      </p>
      <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>
</section>

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

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

<section class="section">
<div class="container">
  <h3 class="title is-4">Fluid container</h3>
  <div class="content">
    <p>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 <code>is-fluid</code> modifier:</p>
  </div>
</div>
</section>

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

{% highlight html %}{{container_fluid_example}}{% endhighlight %}

<section class="section">
<div class="container">
  <h3 class="title is-4">Breakpoint containers</h3>
  <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>
</section>

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