bulma/docs/documentation/start/responsiveness.html

---
title: Responsiveness
layout: docs
theme: start
doc-tab: start
doc-subtab: responsiveness
breadcrumb:
  - home
  - documentation
  - start
  - start-responsiveness
---
{% capture scss_code %}
// Disable the widescreen breakpoint
$widescreen-enabled: false;

// Disable the fullhd breakpoint
$fullhd-enabled: false;
{% endcapture %}

{%
  include docs/elements/anchor.html name="Vertical by
  default"
%}

<div class="content">
  <p>
    Every element in Bulma is <strong>mobile-first</strong> and optimizes 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>
    You can however enforce the <strong>horizontal</strong> layout for both <code>columns</code> or
    <code>level</code> by appending the <code>is-mobile</code> modifier.
  </p>
</div>

{% include docs/elements/anchor.html name="Breakpoints" %}
{% assign variables_file_url = '/blob/master/sass/utilities/initial-variables.sass#L56,L64'
  | prepend: site.data.meta.github
%}
{% assign mixins_file_url = '/blob/master/sass/utilities/mixins.sass#L81,L129' | prepend: site.data.meta.github %}

<div class="content">
  <p>
    Bulma has
    <a href="{{ variables_file_url }}" target="_blank">4 breakpoints</a> which defines <strong>5 screen sizes</strong>:
  </p>
  <ul>
    {% for breakpoint_hash in site.data.breakpoints %}
      {% assign breakpoint = breakpoint_hash[1] %}
      <li>
        <code>{{ breakpoint.id }}</code>:
        {% if breakpoint.id == 'mobile' -%}
          up to <code>{{ breakpoint.to }}px</code>
        {%- else -%}
          from <code>{{ breakpoint.from }}px</code>
        {%- endif %}
      </li>
    {% endfor %}
  </ul>

  <p>
    To make use of these breakpoints, Bulma provides
    <a href="{{ site.url }}/documentation/sass/responsive-mixins/">9 responsive mixins</a>.
  </p>
</div>

{% include docs/components/breakpoints-table.html %}
{% assign urm_link = site.data.links.by_id['utilities-responsive-mixins'] %}

<div class="content">
  <p>
    To simplify using these breakpoints, Bulma provides
    <a href="{{ site.url }}{{ urm_link.path }}">easy-to-use responsive mixins</a>.
  </p>
</div>

{% assign vernum = site.data.meta.version | downcase | remove: '.' | plus: 0 %}
{% if vernum >= 70 %}
  {%
    include docs/elements/anchor.html name="Disabling
    breakpoints"
  %}

  <div class="content">
    <p>
      By default, the <code>$widescreen</code> and <code>$fullhd</code> breakpoints are <strong>enabled</strong>. You
      can disable them by setting the corresponding Sass boolean to <code>false</code>:
    </p>
  </div>

  <div class="bd-highlight-full">
    {% highlight sass -%}
    {{- scss_code -}}
    {%- endhighlight %}
  </div>
{% endif %}

{% capture custom_message %}
These are
<a href="{{ derived_variables.file_url }}" target="_blank">variables</a> with a
value that <strong>references</strong> another variable.
{% endcapture %}

{%
  include docs/components/variables.html type='element'
  variables_keys=page.variables_keys custom_message=custom_message
  folder='utilities' file='initial-variables'
%}