--- title: Responsiveness layout: documentation doc-tab: overview doc-subtab: responsiveness variables_keys: - gap - tablet - desktop - widescreen - fullhd --- {% capture scss_code %} // Disable the widescreen breakpoint $widescreen-enabled: false // Disable the fullhd breakpoint $fullhd-enabled: false {% endcapture %} {% include subnav/subnav-overview.html %}

Responsiveness

Bulma is a mobile-first framework

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

Every element in Bulma is mobile-first and optimizes for vertical reading, so by default on mobile:

  • columns are stacked vertically
  • the level component will show its children stacked vertically
  • the nav menu will be hidden

For example, you can enforce the horizontal layout for both columns or nav by appending the is-mobile modifier.

{% include anchor.html name="Breakpoints" %} {% assign variables_file_url = "/blob/master/sass/utilities/initial-variables.sass#L46,L57" | prepend: site.data.meta.github %} {% assign mixins_file_url = "/blob/master/sass/utilities/mixins.sass#L182,L226" | prepend: site.data.meta.github %}

Bulma has 5 breakpoints:

    {% for breakpoint_hash in site.data.breakpoints %} {% assign breakpoint = breakpoint_hash[1] %}
  • {{ breakpoint.id }}: {% if breakpoint.id == 'mobile' %}up to {{ breakpoint.to }}px{% else %}from {{ breakpoint.from }}px{% endif %}
  • {% endfor %}

Bulma uses 9 responsive mixins:

    {% for breakpoint_hash in site.data.breakpoints %} {% assign breakpoint = breakpoint_hash[1] %} {% case breakpoint.id %} {% when 'mobile' %}
  • ={{ breakpoint.id }}
    until {{ breakpoint.to }}px
  • {% when 'fullhd' %}
  • ={{ breakpoint.id }}
    from {{ breakpoint.from }}px
  • {% else %}
  • ={{ breakpoint.id }}
    from {{ breakpoint.from }}px
  • ={{ breakpoint.id }}-only
    from {{ breakpoint.from }}px and until {{ breakpoint.to }}px
  • {% if breakpoint.id == 'tablet' %}
  • =touch
    until {{ breakpoint.to }}px
  • {% endif %} {% endcase %} {% endfor %}
{% for breakpoint_hash in site.data.breakpoints %} {% assign breakpoint = breakpoint_hash[1] %} {% endfor %}
{{ breakpoint.name }}
{% if breakpoint.id == 'mobile' %} Up to {{ breakpoint.to }}px {% elsif breakpoint.id == 'fullhd' %} {{ breakpoint.from }}px and above {% else %} Between {{ breakpoint.from }}px and {{ breakpoint.to }}px {% endif %}

mobile

-

-

tablet

-

desktop

-

widescreen

-

fullhd

-

tablet-only

-

-

desktop-only

-

-

widescreen-only

-

touch

-

until-widescreen

-

until-fullhd

-

{% assign vernum = site.version | downcase | remove: "." | plus: 0 %} {% if vernum >= 63 %} {% include anchor.html name="Disabling breakpoints" %} {% include elements/new-tag.html version="0.6.3" %}

By default, the $widecreen and $fullhd breakpoints are enabled. You can disable them by setting the corresponding Sass boolean to false:

{% highlight sass %}{{ scss_code }}{% endhighlight %}
{% endif %} {% include anchor.html name="Variables" %}

You can use these variables to customize the responsive breakpoints. Simply set one or multiple of these variables before importing Bulma. Learn how.

{% for key in page.variables_keys %} {% assign variable = site.data.variables.utilities.initial-variables.vars[key] %} {% endfor %}
Name Default value
Name Default value
{{ variable.name }} {{ variable.value }}