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

{% 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>.header</code></li>
        <li><code>.hero</code></li>
        <li><code>.section</code></li>
        <li><code>.footer</code></li>
      </ul>
      <p>On <strong>mobile</strong> and <strong>tablet</strong>, the container will have a margin of <strong>1.5rem</strong> on both the left and right sides.</p>
      <p>On <strong>desktop</strong> (> 980px), the container will have a maximum width of <strong>960px</strong> and will be <strong>horizontally centered</strong>.</p>
    </div>
  </div>

  <div class="example">
    <div class="container">
      <div class="notification">
        This container is <strong>centered</strong> on desktop.
      </div>
    </div>
  </div>

{% highlight html %}
<div class="container">
  <div class="notification">
    This container is <strong>centered</strong> on desktop.
  </div>
</div>
{% endhighlight %}

  <div class="container">
    <hr>
    <h3 class="title">Fluid container</h3>
    <div class="content">
      <p>If you don't want to have a maximum width but want to keep the 20px margin on the left and right sides, add the <code>is-fluid</code> modifier:</p>
    </div>
  </div>
</section>

  <div class="example is-fullwidth">
    <div class="container is-fluid">
      <div class="notification">
        This container is <strong>fluid</strong>: it will have a 20px gap on either side.
      </div>
    </div>
  </div>

{% highlight html %}
<div class="container is-fluid">
  <div class="notification">
    This container is <strong>fluid</strong>: it will have a 20px gap on either side, on any viewport size.
  </div>
</div>
{% endhighlight %}