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				-

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 $widecreen 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 #

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

Name	Default value
Name	Default value
`$gap`	`32px`
`$tablet`	`769px`
`$desktop`	`960px + (2 * $gap)`
`$widescreen`	`1152px + (2 * $gap)`
`$fullhd`	`1344px + (2 * $gap)`

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