bulma/docs/documentation/modifiers/responsive-helpers.html

---
layout: documentation
doc-tab: modifiers
doc-subtab: responsive-helpers
---

{% include subnav-modifiers.html %}

<section class="section">
  <div class="container">
    <h1 class="title">Responsive helpers</h1>
    <h2 class="subtitle"><strong>Show/hide content</strong> depending on the width of the viewport</h2>

    <hr>

    <h3 class="title">Show</h3>

    <div class="content">
      <p>
        You can use one of the following <code>display</code> classes:
      </p>
      <ul>
        <li><code>block</code></li>
        <li><code>flex</code></li>
        <li><code>inline</code></li>
        <li><code>inline-block</code></li>
        <li><code>inline-flex</code></li>
      </ul>
      <p>For example, here's what the <code>is-flex</code> helper works:</p>
    </div>

    <table class="table is-bordered">
      <thead>
        <tr>
          <th>
            Class
          </th>
          <th>
            Mobile<br>
            Up to <code>768px</code>
          </th>
          <th>
            Tablet<br>
            Between <code>769px</code> and <code>979px</code>
          </th>
          <th>
            Desktop<br>
            Between <code>980px</code> and <code>1179px</code>
          </th>
          <th>
            Widescreen<br>
            Above <code>1180px</code>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="is-narrow">
            <code>is-flex-mobile</code>
          </td>
          <td class="is-narrow">
            <p class="notification is-success">flex</p>
          </td>
          <td class="is-narrow">
            <p class="notification">unchanged</p>
          </td>
          <td class="is-narrow">
            <p class="notification">unchanged</p>
          </td>
          <td class="is-narrow">
            <p class="notification">unchanged</p>
          </td>
        </tr>
        <tr>
          <td class="is-narrow">
            <code>is-flex-tablet-only</code>
          </td>
          <td class="is-narrow">
            <p class="notification">unchanged</p>
          </td>
          <td class="is-narrow">
            <p class="notification is-success">flex</p>
          </td>
          <td class="is-narrow">
            <p class="notification">unchanged</p>
          </td>
          <td class="is-narrow">
            <p class="notification">unchanged</p>
          </td>
        </tr>
        <tr>
          <td class="is-narrow">
            <code>is-flex-desktop-only</code>
          </td>
          <td class="is-narrow">
            <p class="notification">unchanged</p>
          </td>
          <td class="is-narrow">
            <p class="notification">unchanged</p>
          </td>
          <td class="is-narrow">
            <p class="notification is-success">flex</p>
          </td>
          <td class="is-narrow">
            <p class="notification">unchanged</p>
          </td>
        </tr>
        <tr>
          <td class="is-narrow">
            <code>is-flex-widescreen</code>
          </td>
          <td class="is-narrow">
            <p class="notification">unchanged</p>
          </td>
          <td class="is-narrow">
            <p class="notification">unchanged</p>
          </td>
          <td class="is-narrow">
            <p class="notification">unchanged</p>
          </td>
          <td class="is-narrow">
            <p class="notification is-success">flex</p>
          </td>
        </tr>
        <tr>
          <th colspan="4">
            <p>Classes to display <strong>up to</strong> or <strong>from</strong> a specific breakpoint</p>
          </th>
        </tr>
        <tr>
          <td class="is-narrow">
            <code>is-flex-touch</code>
          </td>
          <td class="is-narrow">
            <p class="notification is-success">flex</p>
          </td>
          <td class="is-narrow">
            <p class="notification is-success">flex</p>
          </td>
          <td class="is-narrow">
            <p class="notification">unchanged</p>
          </td>
          <td class="is-narrow">
            <p class="notification">unchanged</p>
          </td>
        </tr>
        <tr>
          <td class="is-narrow">
            <code>is-flex-tablet</code>
          </td>
          <td class="is-narrow">
            <p class="notification">unchanged</p>
          </td>
          <td class="is-narrow">
            <p class="notification is-success">flex</p>
          </td>
          <td class="is-narrow">
            <p class="notification is-success">flex</p>
          </td>
          <td class="is-narrow">
            <p class="notification is-success">flex</p>
          </td>
        </tr>
        <tr>
          <td class="is-narrow">
            <code>is-flex-desktop</code>
          </td>
          <td class="is-narrow">
            <p class="notification">unchanged</p>
          </td>
          <td class="is-narrow">
            <p class="notification">unchanged</p>
          </td>
          <td class="is-narrow">
            <p class="notification is-success">flex</p>
          </td>
          <td class="is-narrow">
            <p class="notification is-success">flex</p>
          </td>
        </tr>
      </tbody>
    </table>

    <div class="content">
      <p>For the other display options, just replace <code>is-flex</code> with <code>is-block</code> <code>is-inline</code> <code>is-inline-block</code> or <code>is-inline-flex</code>

    <hr>

    <h3 class="title">Hide</h3>

    <table class="table is-bordered">
      <thead>
        <tr>
          <th>
            Class
          </th>
          <th>
            Mobile<br>
            Up to <code>768px</code>
          </th>
          <th>
            Tablet<br>
            Between <code>769px</code> and <code>999px</code>
          </th>
          <th>
            Desktop<br>
            Between <code>1000px</code> and <code>1239px</code>
          </th>
          <th>
            Widescreen<br>
            Above <code>1240px</code>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="is-narrow">
            <code>is-hidden-mobile</code>
          </td>
          <td class="is-narrow">
            <p class="notification">hidden</p>
          </td>
          <td class="is-narrow">
            <p class="notification is-success">visible</p>
          </td>
          <td class="is-narrow">
            <p class="notification is-success">visible</p>
          </td>
          <td class="is-narrow">
            <p class="notification is-success">visible</p>
          </td>
        </tr>
        <tr>
          <td class="is-narrow">
            <code>is-hidden-tablet-only</code>
          </td>
          <td class="is-narrow">
            <p class="notification is-success">visible</p>
          </td>
          <td class="is-narrow">
            <p class="notification">hidden</p>
          </td>
          <td class="is-narrow">
            <p class="notification is-success">visible</p>
          </td>
          <td class="is-narrow">
            <p class="notification is-success">visible</p>
          </td>
        </tr>
        <tr>
          <td class="is-narrow">
            <code>is-hidden-desktop-only</code>
          </td>
          <td class="is-narrow">
            <p class="notification is-success">visible</p>
          </td>
          <td class="is-narrow">
            <p class="notification is-success">visible</p>
          </td>
          <td class="is-narrow">
            <p class="notification">hidden</p>
          </td>
          <td class="is-narrow">
            <p class="notification is-success">visible</p>
          </td>
        </tr>
        <tr>
          <td class="is-narrow">
            <code>is-hidden-widescreen</code>
          </td>
          <td class="is-narrow">
            <p class="notification is-success">visible</p>
          </td>
          <td class="is-narrow">
            <p class="notification is-success">visible</p>
          </td>
          <td class="is-narrow">
            <p class="notification is-success">visible</p>
          </td>
          <td class="is-narrow">
            <p class="notification">hidden</p>
          </td>
        </tr>
        <tr>
          <th colspan="4">
            <p>Classes to hide <strong>up to</strong> or <strong>from</strong> a specific breakpoint</p>
          </th>
        </tr>
        <tr>
          <td class="is-narrow">
            <code>is-hidden-touch</code>
          </td>
          <td class="is-narrow">
            <p class="notification">hidden</p>
          </td>
          <td class="is-narrow">
            <p class="notification">hidden</p>
          </td>
          <td class="is-narrow">
            <p class="notification is-success">visible</p>
          </td>
          <td class="is-narrow">
            <p class="notification is-success">visible</p>
          </td>
        </tr>
        <tr>
          <td class="is-narrow">
            <code>is-hidden-tablet</code>
          </td>
          <td class="is-narrow">
            <p class="notification is-success">visible</p>
          </td>
          <td class="is-narrow">
            <p class="notification">hidden</p>
          </td>
          <td class="is-narrow">
            <p class="notification">hidden</p>
          </td>
          <td class="is-narrow">
            <p class="notification">hidden</p>
          </td>
        </tr>
        <tr>
          <td class="is-narrow">
            <code>is-hidden-desktop</code>
          </td>
          <td class="is-narrow">
            <p class="notification is-success">visible</p>
          </td>
          <td class="is-narrow">
            <p class="notification is-success">visible</p>
          </td>
          <td class="is-narrow">
            <p class="notification">hidden</p>
          </td>
          <td class="is-narrow">
            <p class="notification">hidden</p>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</section>