You can use one of the following display classes:
is-blockis-flexis-inlineis-inline-blockis-inline-flex
For example, here's how the is-flex helper works:
Sponsor
Responsive helpers
Show/hide content depending on the width of the viewport
Show #
| Class |
Mobile Up to 768px
|
Tablet Between 769px and
1023px
|
Desktop Between 1024px and
1215px
|
Widescreen Between 1216px and
1407px
|
FullHD1408px 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
|
FullHD1408px 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 |
