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
modifer.
Bulma has 5 breakpoints:
mobile
: up to 768px
tablet
: from 769px
desktop
: from 1000px
widescreen
: from 1192px
- New!
fullhd
: from 1384px
Bulma uses 9 responsive mixins:
-
=mobile
until 768px
-
=tablet
from 769px
-
=tablet-only
from 769px
and until 999px
-
=touch
until 999px
-
=desktop
from 1000px
-
=desktop-only
from 1000px
and until 1191px
-
=widescreen
from 1192px
-
=widescreen-only
from 1192px
and until 1383px
-
New!
=fullhd
from 1384px