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

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

is-flex-tablet-only

unchanged

flex

unchanged

is-flex-desktop-only

unchanged

flex

unchanged

is-flex-widescreen-only

unchanged

flex

unchanged

Classes to display up to or from a specific breakpoint

is-flex-touch

flex

unchanged

is-flex-tablet

unchanged

flex

is-flex-desktop

unchanged

flex

is-flex-widescreen

unchanged

flex

is-flex-fullhd

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

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

is-hidden-tablet-only

visible

hidden

visible

is-hidden-desktop-only

visible

hidden

visible

is-hidden-widescreen-only

visible

hidden

visible

Classes to hide up to or from a specific breakpoint

is-hidden-touch

hidden

visible

is-hidden-tablet

visible

hidden

is-hidden-desktop

visible

hidden

is-hidden-widescreen

visible

hidden

is-hidden-fullhd

visible

hidden

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