--- title: Responsiveness layout: documentation doc-tab: overview doc-subtab: responsiveness variables_keys: - gap - tablet - desktop - widescreen - fullhd --- {% 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] %}
  • {% if breakpoint.id == 'fullhd' %}New! {% endif %}{{ 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' %}
  • New! ={{ 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

-

{% 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 }}