<commit_before>---
title: Container
layout: documentation
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 either:
  </p>
  <ul>
    <li><code>navbar</code></li>
    <li><code>hero</code></li>
    <li><code>section</code></li>
    <li><code>footer</code></li>
  </ul>
</div><commit_msg>Improve wording of container usage description<commit_after>---
title: Container
layout: documentation
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>
{'fraction_non_alphanumeric': 0.16120515608013666, 'fraction_numerical': 0.0015530361857431277, 'mean_word_length': 3.4383184011026877, 'pattern_counts': {'":': 0, '<': 195, '<?xml version=': 0, '>': 195, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4925761', 'n_tokens_mistral': 2195, 'n_tokens_neox': 2024, 'n_words': 533}