You are viewing the deprecated 0.9.3 version of the website. Click here to view the latest version
Responsiveness
Bulma is a mobile-first framework
Every element in Bulma is mobile-first and optimizes for vertical reading, so by default on mobile:
columns are stacked verticallylevel component will show its children stacked verticallynav menu will be hiddenYou can however enforce the horizontal layout for both columns or level by appending the is-mobile modifier.
Bulma has 5 breakpoints:
mobile: up to 768pxtablet: from 769pxdesktop: from 1024pxwidescreen: from 1216pxfullhd: from 1408pxBulma uses 9 responsive mixins:
=mobile768px
=tablet769px
=tablet-only769px and until 1023px
=touch1023px
=desktop1024px
=desktop-only1024px and until 1215px
=widescreen1216px
=widescreen-only1216px and until 1407px
=fullhd1408px
|
Mobile Up to 768px
|
Tablet Between 769px and 1023px
|
Desktop Between 1024px and 1215px
|
Widescreen Between 1216px and 1407px
|
FullHD1408px and above
|
|---|---|---|---|---|
|
mobile |
- |
|||
|
- |
tablet |
|||
|
- |
desktop |
|||
|
- |
widescreen |
|||
|
- |
fullhd |
|||
|
- |
tablet-only |
- |
||
|
- |
desktop-only |
- |
||
|
- |
widescreen-only |
- |
||
|
touch |
- |
|||
|
until-widescreen |
- |
|||
|
until-fullhd |
- |
|||
By default, the $widescreen 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$gap32px$tablet769px$desktop960px + (2 * $gap)$widescreen1152px + (2 * $gap)$fullhd1344px + (2 * $gap)
This page is open source.
Noticed a typo? Or something unclear?
Improve this page on GitHub
