You can use one of the following display
classes:
block
flex
inline
inline-block
inline-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:
block
flex
inline
inline-block
inline-flex
For 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!