Visibility Classes

Visibility classes are used to hide or show different elements for certain screen sizes or devices.

  1. Choose either show-for or hide-for
  2. Choose what screen size you'll be hiding and showing the content for
    • small
    • medium
    • large
    • xlarge
    • xxlarge
  3. Optionally, add a third parameter to encompass sizes larger or smaller than the one specified.
    • up - also include screen sizes larger than the one specified
    • down - also include screen sizes smaller than the one specified
    • only - only include the specified screen size

There are also a few device-specific choices:

  • touch - hide or show based on whether a device supports touch
  • portrait or landscape - hide or show when mobile devices are rotated to the specified orientation. Note: desktops will almost always report as landscape.
  • print - hide or show when a user prints your page
HTML
<ul>
    <li class="show-for-small-only">You are on a small screen.</li>
    <li class="show-for-medium-up">You are on a medium, large, xlarge, or xxlarge screen.</li>
    <li class="show-for-medium-only">You are on a medium screen.</li>
    <li class="show-for-large-up">You are on a large, xlarge, or xxlarge screen.</li>
    <li class="show-for-large-only">You are on a large screen.</li>
    <li class="show-for-xlarge-up">You are on an xlarge or xxlarge screen.</li>
    <li class="show-for-xlarge-only">You are on an xlarge screen.</li>
    <li class="show-for-xxlarge-up">You are on an xxlarge screen.</li>
</ul>
Rendered HTML
  • You are on a small screen.
  • You are on a medium, large, xlarge, or xxlarge screen.
  • You are on a medium screen.
  • You are on a large, xlarge, or xxlarge screen.
  • You are on a large screen.
  • You are on an xlarge or xxlarge screen.
  • You are on an xlarge screen.
  • You are on an xxlarge screen.
HTML
<ul>
    <li class="hide-for-small-only">You are <em>not</em> on a small screen.</li>
    <li class="hide-for-medium-up">You are <em>not</em> on a medium, large, xlarge, or xxlarge screen.</li>
    <li class="hide-for-medium-only">You are <em>not</em> on a medium screen.</li>
    <li class="hide-for-large-up">You are <em>not</em> on a large, xlarge, or xxlarge screen.</li>
    <li class="hide-for-large-only">You are <em>not</em> on a large screen.</li>
    <li class="hide-for-xlarge-up">You are <em>not</em> on an xlarge or xxlarge screen.</li>
    <li class="hide-for-xlarge-only">You are <em>not</em> on an xlarge screen.</li>
    <li class="hide-for-xxlarge-up">You are <em>not</em> on an xxlarge screen.</li>
</ul>
Rendered HTML
  • You are not on a small screen.
  • You are not on a medium, large, xlarge, or xxlarge screen.
  • You are not on a medium screen.
  • You are not on a large, xlarge, or xxlarge screen.
  • You are not on a large screen.
  • You are not on an xlarge screen and up.
  • You are not on an xlarge screen.
  • You are not on an xxlarge screen.