Responsive helpers

Show/hide content depending on the width of the viewport


Show #

You can use one of the following display classes:

  • is-block
  • is-flex
  • is-inline
  • is-inline-block
  • is-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

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

Other visibility helpers #

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