--- title: Responsiveness subtitle: "Bulma is a mobile-first framework" 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 anchor.html name="Vertical by default" %}

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

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:

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

-

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