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