You are viewing the deprecated 0.9.4 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 4 breakpoints which defines 5 screen sizes:
mobile: up to 768pxtablet: from 769pxdesktop: from 1024pxwidescreen: from 1216pxfullhd: from 1408pxTo make use of these breakpoints, Bulma provides 9 responsive mixins.
|
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 |
- |
|||
To simplify using these breakpoints, Bulma provides easy-to-use responsive mixins.
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
