--- title: Responsiveness layout: documentation doc-tab: overview doc-subtab: responsiveness breadcrumb: - home - documentation - overview - overview-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 elements/anchor.html name="Vertical by default" %}

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

You can however enforce the horizontal layout for both columns or nav by appending the is-mobile modifier.

{% include elements/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#L81,L129" | prepend: site.data.meta.github %}

Bulma has 5 breakpoints:

Bulma uses 9 responsive mixins:

{% 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.data.meta.version | downcase | remove: "." | plus: 0 %} {% if vernum >= 70 %} {% include elements/anchor.html name="Disabling breakpoints" %} {% include elements/new-tag.html version="0.7.0" %}

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 %} {% capture custom_message %} These are variables with a value that references another variable. {% endcapture %} {% include elements/variables.html type='element' variables_keys=page.variables_keys custom_message=custom_message folder='utilities' file='initial-variables' %}