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

Documentation

Everything you need to create a website with Bulma

# Responsive helpers

## Show/hide content depending on the width of the viewport

### Show #

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 `1007px` | Desktop Between `1008px` and `1199px` | Widescreen Between `1200px` and `1391px` | FullHD Above `1392px`
--- | --- | --- | --- | --- | ---
`is-flex-mobile` | flex | unchanged | unchanged | unchanged | unchanged
`is-flex-tablet-only` | unchanged | flex | unchanged | unchanged | unchanged
`is-flex-desktop-only` | unchanged | unchanged | flex | unchanged | unchanged
`is-flex-widescreen-only` | unchanged | unchanged | unchanged | flex | unchanged
Classes to display up to or from a specific breakpoint
`is-flex-touch` | flex | flex | unchanged | unchanged | unchanged
`is-flex-tablet` | unchanged | flex | flex | flex | flex
`is-flex-desktop` | unchanged | unchanged | flex | flex | flex
`is-flex-widescreen` | unchanged | unchanged | unchanged | flex | flex
`is-flex-fullhd` | unchanged | unchanged | unchanged | unchanged | flex

For the other display options, just replace `is-flex` with `is-block` `is-inline` `is-inline-block` or `is-inline-flex`

### Hide #

Class | Mobile Up to `768px` | Tablet Between `769px` and `1007px` | Desktop Between `1008px` and `1199px` | Widescreen Between `1200px` and `1391px` | FullHD Above `1392px`
--- | --- | --- | --- | --- | ---
`is-hidden-mobile` | hidden | visible | visible | visible | visible
`is-hidden-tablet-only` | visible | hidden | visible | visible | visible
`is-hidden-desktop-only` | visible | visible | hidden | visible | visible
`is-hidden-widescreen-only` | visible | visible | visible | hidden | visible
Classes to hide up to or from a specific breakpoint
`is-hidden-touch` | hidden | hidden | visible | visible | visible
`is-hidden-tablet` | visible | hidden | hidden | hidden | hidden
`is-hidden-desktop` | visible | visible | hidden | hidden | hidden
`is-hidden-widescreen` | visible | visible | visible | hidden | hidden
`is-hidden-fullhd` | visible | visible | visible | visible | hidden

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

Bulma Partners

Check out their products!

Bulma Newsletter

Get notified when v1 is ready!