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 level
by appending the is-mobile
modifier.
Breakpoints
#
Bulma has 4 breakpoints which defines 5 screen sizes:
mobile
: up to 768px
tablet
: from 769px
desktop
: from 1024px
widescreen
: from 1216px
fullhd
: from 1408px
To make use of these breakpoints, Bulma provides 9 responsive mixins.
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
|
-
|
To simplify using these breakpoints, Bulma provides easy-to-use responsive mixins.
Disabling breakpoints
#
By default, the $widescreen
and $fullhd
breakpoints are enabled. You can disable them by setting the corresponding Sass boolean to false
:
Variables
#
Name
Type
Value
Computed Value
Computed Type