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