bulma/docs/documentation/overview/responsiveness.html

---
layout: documentation
doc-tab: overview
doc-subtab: responsiveness
---

{% include subnav-overview.html %}

<section class="section">
  <div class="container">
    <h1 class="title">Responsiveness</h1>
    <h2 class="subtitle">Bulma is a <strong>mobile-first</strong> framework</h2>

    <hr>

    <h3 class="title">Breakpoints</h3>
    <div class="content">
      <p>Bulma has 4 breakpoints:</p>
      <ul>
        <li><code>mobile</code>: up to <code>768px</code></li>
        <li><code>tablet</code>: from <code>769px</code></li>
        <li><code>desktop</code>: from <code>980px</code></li>
        <li><code>widescreen</code>: from <code>1180px</code></li>
      </ul>
      <p>Bulma uses 7 responsive mixins:</p>
      <ul>
        <li>
          <code>=mobile</code><br>
          until <code>768px</code>
        </li>
        <li>
          <code>=tablet</code><br>
          from <code>769px</code>
        </li>
        <li>
          <code>=tablet-only</code><br>
          from <code>769px</code> and until <code>979px</code>
        </li>
        <li>
          <code>=touch</code><br>
          until <code>979px</code>
        </li>
        <li>
          <code>=desktop</code><br>
          from <code>980px</code>
        </li>
        <li>
          <code>=desktop-only</code><br>
          from <code>980px</code> and until <code>1179px</code>
        </li>
        <li>
          <code>=widescreen</code><br>
          from <code>1180px</code>
        </li>
      </ul>
      <p>How Bulma works is that <strong>everything is mobile-first</strong> by default, and responsive mixins act as <em>minimum viewport widths</em> where some alternative styles are applied.</p>
    </div>

    <table class="table">
      <thead>
        <tr>
          <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>
            <code>1180px</code> and above
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="is-narrow">
            <p class="notification is-success">mobile</p>
          </td>
          <td class="is-narrow" colspan="3">
            <p class="notification">-</p>
          </td>
        </tr>
        <tr>
          <td class="is-narrow">
            <p class="notification">-</p>
          </td>
          <td class="is-narrow" colspan="3">
            <p class="notification is-success">tablet</p>
          </td>
        </tr>
        <tr>
          <td class="is-narrow" colspan="2">
            <p class="notification">-</p>
          </td>
          <td class="is-narrow" colspan="3">
            <p class="notification is-success">desktop</p>
          </td>
        </tr>
        <tr>
          <td class="is-narrow" colspan="3">
            <p class="notification">-</p>
          </td>
          <td class="is-narrow">
            <p class="notification is-success">widescreen</p>
          </td>
        </tr>
        <tr>
          <td class="is-narrow">
            <p class="notification">-</p>
          </td>
          <td class="is-narrow">
            <p class="notification is-success">tablet-only</p>
          </td>
          <td class="is-narrow" colspan="2">
            <p class="notification">-</p>
          </td>
        </tr>
        <tr>
          <td class="is-narrow" colspan="2">
            <p class="notification">-</p>
          </td>
          <td class="is-narrow">
            <p class="notification is-success">desktop-only</p>
          </td>
          <td class="is-narrow">
            <p class="notification">-</p>
          </td>
        </tr>
        <tr>
          <td class="is-narrow" colspan="2">
            <p class="notification is-success">touch</p>
          </td>
          <td class="is-narrow" colspan="2">
            <p class="notification">-</p>
          </td>
        </tr>
      </tbody>
    </table>

    <h4>

    <h3 class="title">Vertical by default</h3>
    <div class="content">
      <p>
        Every element in Bulma is <strong>mobile-first</strong> and optmizes for <strong>vertical reading</strong>, so by default on mobile:
      </p>
      <ul>
        <li><code>columns</code> are stacked vertically</li>
        <li>the <code>level</code> component will show its children stacked vertically</li>
        <li>the <code>nav</code> menu will be hidden</li>
      </ul>
      <p>For example, you can enforce the <strong>horizontal</strong> layout for both <code>columns</code> or <code>nav</code> by appending the <code>is-mobile</code> modifer.</p>
    </div>
  </div>
</section>