You are viewing the deprecated 0.7.0 version of the website. Click here to view the latest version

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

You can however enforce the horizontal layout for both columns or nav by appending the is-mobile modifier.


Breakpoints #

Bulma has 5 breakpoints:

  • mobile: up to 768px
  • tablet: from 769px
  • desktop: from 1024px
  • widescreen: from 1216px
  • 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
  • =fullhd
    from 1408px
Mobile
Up to 768px
Tablet
Between 769px and 1023px
Desktop
Between 1024px and 1215px
Widescreen
Between 1216px and 1407px
FullHD
1408px and above

mobile

-

-

tablet

-

desktop

-

widescreen

-

fullhd

-

tablet-only

-

-

desktop-only

-

-

widescreen-only

-

touch

-

until-widescreen

-

until-fullhd

-

Mobile
Up to 768px
Tablet
Between 769px and 1023px
Desktop
Between 1024px and 1215px
Widescreen
Between 1216px and 1407px
FullHD
1408px and above

mobile

-

-

tablet

-

desktop

-

widescreen

-

fullhd

-

tablet-only

-

-

desktop-only

-

-

widescreen-only

-

touch

-

until-widescreen

-

until-fullhd

-


Disabling breakpoints #

New! 0.7.0

By default, the $widecreen and $fullhd breakpoints are enabled. You can disable them by setting the corresponding Sass boolean to false:

// Disable the widescreen breakpoint
$widescreen-enabled: false

// Disable the fullhd breakpoint
$fullhd-enabled: false

Variables #

You can use these variables to customize the responsive breakpoints. Simply set one or multiple of these variables before importing Bulma. Learn how.

Name Default value
Name Default value
$gap 32px
$tablet 769px
$desktop 960px + (2 * $gap)
$widescreen 1152px + (2 * $gap)
$fullhd 1344px + (2 * $gap)

Made with Bulma
This page is open source. Noticed a typo? Or something unclear?
Improve this page on GitHub

#native_company# #native_desc#
#native_cta#
New!

The official Bulma book! 😲

by Jeremy Thomas, creator of Bulma, Oleksii Potiekhin,
Mikko Lauhakari, Aslam Shah and David Berning

A step-by-step guide that teaches you how to build a web interface from scratch using Bulma.

Formats available:
PDF Epub Mobi
or
Kindle

Newsletter

Features, releases, showcase… stay in the loop!