--- layout: documentation doc-tab: modifiers doc-subtab: responsive-helpers --- {% include subnav-modifiers.html %}

# 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 `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`

### Hide

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