--- title: Responsiveness layout: documentation doc-tab: overview doc-subtab: responsiveness --- {% include subnav-overview.html %}

Responsiveness

Bulma is a mobile-first framework


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

For example, you can enforce the horizontal layout for both columns or nav by appending the is-mobile modifer.


Breakpoints

Bulma has 5 breakpoints:

  • mobile: up to 768px
  • tablet: from 769px
  • desktop: from 1008px
  • widescreen: from 1200px
  • New! fullhd: from 1392px

Bulma uses 9 responsive mixins:

  • =mobile
    until 768px
  • =tablet
    from 769px
  • =tablet-only
    from 769px and until 1007px
  • =touch
    until 1007px
  • =desktop
    from 1008px
  • =desktop-only
    from 1008px and until 1199px
  • =widescreen
    from 1200px
  • =widescreen-only
    from 1200px and until 1391px
  • New! =fullhd
    from 1392px
Mobile
Up to 768px
Tablet
Between 769px and 1007px
Desktop
Between 1008px and 1199px
Widescreen
Between 1200px and 1391px
FullHD
1392px and above

mobile

-

-

tablet

-

desktop

-

widescreen

-

fullhd

-

tablet-only

-

-

desktop-only

-

-

widescreen-only

-

touch

-