Responsive helpers

Show/hide content depending on the width of the viewport

You can use one of the following display classes:

For example, here's how the is-flex helper works:

Class	Mobile Up to `768px`	Tablet Between `769px` and `1023px`	Desktop Between `1024px` and `1215px`	Widescreen Between `1216px` and `1407px`	FullHD `1408px` and above
`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

Class	Mobile Up to `768px`	Tablet Between `769px` and `1023px`	Desktop Between `1024px` and `1215px`	Widescreen Between `1216px` and `1407px`	FullHD `1408px` and above
`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

`is-invisible`	Adds visibility hidden
`is-hidden`	Hides element
`is-sr-only`	Hide elements visually but keep the element available to be announced by a screen reader

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