Documentation

Everything you need to create a website with Bulma

Responsiveness

Bulma is a mobile-first framework


Breakpoints

Bulma has 4 breakpoints:

  • mobile: up to 768px
  • tablet: from 769px
  • desktop: from 1000px
  • widescreen: from 1192px

Bulma uses 7 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

How Bulma works is that everything is mobile-first by default, and responsive mixins act as minimum viewport widths where some alternative styles are applied.

Mobile
Up to 768px
Tablet
Between 769px and 999px
Desktop
Between 1000px and 1191px
Widescreen
1192px and above

mobile

-

-

tablet

-

desktop

-

widescreen

-

tablet-only

-

-

desktop-only

-

touch

-

Vertical by default

Every element in Bulma is mobile-first and optmizes 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 Newsletter

Get notified when v1 is ready!