You can use one of the following display classes:
blockflexinlineinline-blockinline-flex
For example, here's what the is-flex helper works:
You are viewing the deprecated 0.4.4 version of the website. Click here to view the latest version
Documentation
Everything you need to create a website with Bulma
You can use one of the following display classes:
blockflexinlineinline-blockinline-flexFor example, here's what the is-flex helper works:
| Class |
Mobile Up to 768px
|
Tablet Between 769px and 979px
|
Desktop Between 980px and 1179px
|
Widescreen Above 1180px
|
|---|---|---|---|---|
is-flex-mobile
|
flex |
unchanged |
unchanged |
unchanged |
is-flex-tablet-only
|
unchanged |
flex |
unchanged |
unchanged |
is-flex-desktop-only
|
unchanged |
unchanged |
flex |
unchanged |
is-flex-widescreen
|
unchanged |
unchanged |
unchanged |
flex |
|
Classes to display up to or from a specific breakpoint |
||||
is-flex-touch
|
flex |
flex |
unchanged |
unchanged |
is-flex-tablet
|
unchanged |
flex |
flex |
flex |
is-flex-desktop
|
unchanged |
unchanged |
flex |
flex |
For the other display options, just replace is-flex with is-block is-inline is-inline-block or is-inline-flex
| Class |
Mobile Up to 768px
|
Tablet Between 769px and 999px
|
Desktop Between 1000px and 1239px
|
Widescreen Above 1240px
|
|---|---|---|---|---|
is-hidden-mobile
|
hidden |
visible |
visible |
visible |
is-hidden-tablet-only
|
visible |
hidden |
visible |
visible |
is-hidden-desktop-only
|
visible |
visible |
hidden |
visible |
is-hidden-widescreen
|
visible |
visible |
visible |
hidden |
|
Classes to hide up to or from a specific breakpoint |
||||
is-hidden-touch
|
hidden |
hidden |
visible |
visible |
is-hidden-tablet
|
visible |
hidden |
hidden |
hidden |
is-hidden-desktop
|
visible |
visible |
hidden |
hidden |
Bulma Partners
Check out their products!