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
For example, you can enforce the horizontal layout for both columns
or nav
by appending the is-mobile
modifier.
Bulma has 5 breakpoints:
mobile
: up to 768px
tablet
: from 769px
desktop
: from 1024px
widescreen
: from 1216px
- New!
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
-
New!
=fullhd
from 1408px
You can use these variables to customize the responsive breakpoints. Simply set one or multiple of these variables before importing Bulma. Learn how.