bulma/docs/documentation/utilities/responsive-mixins.html

---
title: Responsive Mixins
layout: documentation
doc-tab: utilities
doc-subtab: responsive-mixins
fullmain: true
breadcrumb:
- home
- documentation
- utilities
- utilities-responsive-mixins
---

<div class="content">
  <p>
    Bulma is <strong>responsive by default</strong>. <a href="{{ site.url}}/overview/responsiveness/">Learn more about Bulma's responsiveness</a>.
  </p>

  <div class="content">
     By having <strong>4 breakpoints</strong> and supporting <strong>5 screen sizes</strong>, Bulma can support a lot of different setups. To simplify your development process, the framework provides several <strong>responsive mixins</strong> that you can use to create a <strong>responsive design</strong>:
  </div>
</div>

{% capture inc-mobile %}
@include mobile {
  // Styles applied
  // below $tablet
}
{% endcapture %}

{% capture inc-tablet %}
@include tablet {
  // Styles applied
  // above $tablet
}
{% endcapture %}

{% capture inc-tablet-only %}
@include tablet-only {
  // Styles applied
  // between $tablet
  // and $desktop
}
{% endcapture %}

{% capture inc-desktop-only %}
@include desktop-only {
  // Styles applied
  // between $desktop
  // and $widescreen
}
{% endcapture %}

{% capture inc-widescreen-only %}
@include widescreen-only {
  // Styles applied
  // between $widescreen
  // and $fullhd
}
{% endcapture %}

{% capture inc-desktop %}
@include desktop {
  // Styles applied
  // above $desktop
}
{% endcapture %}

{% capture inc-widescreen %}
@include widescreen {
  // Styles applied
  // above $widescreen
}
{% endcapture %}

{% capture inc-fullhd %}
@include fullhd {
  // Styles applied
  // above $fullhd
}
{% endcapture %}

{% capture inc-touch %}
@include touch {
  // Styles applied
  // below $desktop
}
{% endcapture %}

{% capture inc-until-widescreen %}
@include until-widescreen {
  // Styles applied
  // below $widescreen
}
{% endcapture %}

{% capture inc-until-fullhd %}
@include until {
  // Styles applied
  // below $fullhd
}
{% endcapture %}

<div class="table-container">
  <table class="table is-bordered">
    <thead>
      <tr>
        {% for breakpoint_hash in site.data.breakpoints %}
          {% assign breakpoint = breakpoint_hash[1] %}
          <th style="width: 20%;">
            {{ breakpoint.name }}<br>
            {% if breakpoint.id == 'mobile' %}
              Up to <code>{{ breakpoint.to }}px</code>
            {% elsif 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>
        {% endfor %}
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          {% highlight sass %}{{ inc-mobile }}{% endhighlight %}
        </td>
        <td colspan="4">
          <p class="notification">-</p>
        </td>
      </tr>
      <tr>
        <td>
          <p class="notification">-</p>
        </td>
        <td colspan="4">
          {% highlight sass %}{{ inc-tablet }}{% endhighlight %}
        </td>
      </tr>
      <tr>
        <td colspan="2">
          <p class="notification">-</p>
        </td>
        <td colspan="3">
          {% highlight sass %}{{ inc-desktop }}{% endhighlight %}
        </td>
      </tr>
      <tr>
        <td colspan="3">
          <p class="notification">-</p>
        </td>
        <td colspan="2">
          {% highlight sass %}{{ inc-widescreen }}{% endhighlight %}
        </td>
      </tr>
      <tr>
        <td colspan="4">
          <p class="notification">-</p>
        </td>
        <td>
          {% highlight sass %}{{ inc-fullhd }}{% endhighlight %}
        </td>
      </tr>
      <tr>
        <td>
          <p class="notification">-</p>
        </td>
        <td>
          {% highlight sass %}{{ inc-tablet-only }}{% endhighlight %}
        </td>
        <td colspan="3">
          <p class="notification">-</p>
        </td>
      </tr>
      <tr>
        <td colspan="2">
          <p class="notification">-</p>
        </td>
        <td>
          {% highlight sass %}{{ inc-desktop-only }}{% endhighlight %}
        </td>
        <td colspan="2">
          <p class="notification">-</p>
        </td>
      </tr>
      <tr>
        <td colspan="3">
          <p class="notification">-</p>
        </td>
        <td>
          {% highlight sass %}{{ inc-widescreen-only }}{% endhighlight %}
        </td>
        <td>
          <p class="notification">-</p>
        </td>
      </tr>
      <tr>
        <td colspan="2">
          {% highlight sass %}{{ inc-touch }}{% endhighlight %}
        </td>
        <td colspan="3">
          <p class="notification">-</p>
        </td>
      </tr>
      <tr>
        <td colspan="3">
          {% highlight sass %}{{ inc-until-widescreen }}{% endhighlight %}
        </td>
        <td colspan="2">
          <p class="notification">-</p>
        </td>
      </tr>
      <tr>
        <td colspan="4">
          {% highlight sass %}{{ inc-until-fullhd }}{% endhighlight %}
        </td>
        <td colspan="1">
          <p class="notification">-</p>
        </td>
      </tr>
    </tbody>
  </table>
</div>

{% assign or_link = site.data.links.by_id['overview-responsiveness'] %}

<div class="content">
  <p>
    Learn more about <a href="{{ site.url }}{{ or_link.path }}">Bulma responsiveness</a>.
  </p>
</div>