Responsiveness

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.