--- title: Responsive helpers layout: documentation hide_categories: true doc-tab: modifiers doc-subtab: responsive-helpers breadcrumb: - home - documentation - modifiers - modifiers-responsive-helpers --- {% capture thead %} Class {% for breakpoint_hash in site.data.breakpoints %} {% assign breakpoint = breakpoint_hash[1] %} {{ breakpoint.name }}
{% if breakpoint.id == 'mobile' %} Up to {{ breakpoint.to }}px {% elsif breakpoint.id == 'fullhd' %} {{ breakpoint.from }}px and above {% else %} Between {{ breakpoint.from }}px and {{ breakpoint.to }}px {% endif %} {% endfor %} {% endcapture %} {% capture flex %}

flex

{% endcapture %} {% capture visible %}

visible

{% endcapture %} {% capture hidden %}

hidden

{% endcapture %} {% capture unchanged %}

unchanged

{% endcapture %} {% include elements/anchor.html name="Show" %}

You can use one of the following display classes:

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

{% include layout/main-close.html show_categories=true %}
{{ thead }} {{ flex }} {{ unchanged }} {{ unchanged }} {{ unchanged }} {{ unchanged }} {{ unchanged }} {{ flex }} {{ unchanged }} {{ unchanged }} {{ unchanged }} {{ unchanged }} {{ unchanged }} {{ flex }} {{ unchanged }} {{ unchanged }} {{ unchanged }} {{ unchanged }} {{ unchanged }} {{ flex }} {{ unchanged }} {{ flex }} {{ flex }} {{ unchanged }} {{ unchanged }} {{ unchanged }} {{ unchanged }} {{ flex }} {{ flex }} {{ flex }} {{ flex }} {{ unchanged }} {{ unchanged }} {{ flex }} {{ flex }} {{ flex }} {{ unchanged }} {{ unchanged }} {{ unchanged }} {{ flex }} {{ flex }} {{ unchanged }} {{ unchanged }} {{ unchanged }} {{ unchanged }} {{ flex }}
is-flex-mobile
is-flex-tablet-only
is-flex-desktop-only
is-flex-widescreen-only

Classes to display up to or from a specific breakpoint

is-flex-touch
is-flex-tablet
is-flex-desktop
is-flex-widescreen
is-flex-fullhd
{% include layout/main-open.html %}

For the other display options, just replace is-flex with is-block is-inline is-inline-block or is-inline-flex

{% include elements/anchor.html name="Hide" %} {% include layout/main-close.html %}
{{ thead }} {{ hidden }} {{ visible }} {{ visible }} {{ visible }} {{ visible }} {{ visible }} {{ hidden }} {{ visible }} {{ visible }} {{ visible }} {{ visible }} {{ visible }} {{ hidden }} {{ visible }} {{ visible }} {{ visible }} {{ visible }} {{ visible }} {{ hidden }} {{ visible }} {{ hidden }} {{ hidden }} {{ visible }} {{ visible }} {{ visible }} {{ visible }} {{ hidden }} {{ hidden }} {{ hidden }} {{ hidden }} {{ visible }} {{ visible }} {{ hidden }} {{ hidden }} {{ hidden }} {{ visible }} {{ visible }} {{ visible }} {{ hidden }} {{ hidden }} {{ visible }} {{ visible }} {{ visible }} {{ visible }} {{ hidden }}
is-hidden-mobile
is-hidden-tablet-only
is-hidden-desktop-only
is-hidden-widescreen-only

Classes to hide up to or from a specific breakpoint

is-hidden-touch
is-hidden-tablet
is-hidden-desktop
is-hidden-widescreen
is-hidden-fullhd
{% include layout/main-open.html %}