Responsiveness

Bulma is a mobile-first framework

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

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

Breakpoints #

Bulma has 5 breakpoints:

mobile: up to 768px
tablet: from 769px
desktop: from 1024px
widescreen: from 1216px
fullhd: from 1408px

Bulma uses 9 responsive mixins:

=mobile
until 768px
=tablet
from 769px
=tablet-only
from 769px and until 1023px
=touch
until 1023px
=desktop
from 1024px
=desktop-only
from 1024px and until 1215px
=widescreen
from 1216px
=widescreen-only
from 1216px and until 1407px
=fullhd
from 1408px

Mobile Up to `768px`	Tablet Between `769px` and `1023px`	Desktop Between `1024px` and `1215px`	Widescreen Between `1216px` and `1407px`	FullHD `1408px` and above
mobile	-
-	tablet
-		desktop
-			widescreen
-				fullhd
-	tablet-only	-
-		desktop-only	-
-			widescreen-only	-
touch		-
until-widescreen			-
until-fullhd				-

Disabling breakpoints #

New! 0.7.0

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

  // Disable the widescreen breakpoint
$widescreen-enabled: false

// Disable the fullhd breakpoint
$fullhd-enabled: false

Variables #

These are variables with a value that references another variable.

Name	Type	Default value	Computed value
Name	Type	Default value	Computed value
`$gap`	size	`64px`
`$tablet`	size	`769px`
`$desktop`	computed	`960px + (2 * $gap)`
`$widescreen`	computed	`1152px + (2 * $gap)`
`$fullhd`	computed	`1344px + (2 * $gap)`

This page is open source. Noticed a typo? Or something unclear?
Improve this page on GitHub

#native_company# #native_desc#

The official Bulma book cover

New!

The official Bulma book! 😲

by Jeremy Thomas, creator of Bulma, Oleksii Potiekhin,
Mikko Lauhakari, Aslam Shah and David Berning

A step-by-step guide that teaches you how to build a web interface from scratch using Bulma.

Formats available:

PDF Epub Mobi

or

Kindle

PDF + Epub + Mobi Buy from

Kindle version Buy from

Or download a free sample !