Showing/Hiding Content

There are multiple classes that can be used to conditionally show or hide content based on the user’s environment. These classes are useful for progressive enhancement and responsive design.

Based on JavaScript Support

To only show an item when JavaScript is enabled in the user’s browser, add the class if-js-enabled to the element.
To only show an item when JavaScript is disabled in the user’s browser, add the class if-js-disabled to the element.

To make these classes work, initialize the body element or App component with the class js-disabled, then replace the class with js-enabled in a script.

Based on Viewport Size

To only show an item when the screen is wide, add the class if-wide-viewport to the element.
To only show an item when the screen is a medium width, add the class if-medium-viewport to the element.
To only show an item when the screen is narrow (e.g., on an iPhone), add the class if-narrow-viewport to the element.

To show an element at multiple viewport sizes, simply combine the classes for your desired sizes. For example, to show an item only on a narrow or medium viewport, use both classes: if-narrow-viewport if-medium-viewport. Adding all 3 classes is equivalent to not adding any viewport classes at all; in either case, the element will be visible at any viewport size.

Wide

The viewport is considered wide if it is at least as wide as this box.

Medium

The viewport is considered medium if it is at least as wide as this box, but fits within the outer box.

Narrow

The viewport is considered narrow if it fits inside the outer two boxes.

Examples

For each of the classes listed below, you will see a checkmark (✅) next to the class’s name if the condition is currently met.

Try resizing your browser window or turning JavaScript on/off to see how the checkmarks change.

if-js-enabled ✅

if-js-disabled ✅

if-narrow-viewport ✅

if-medium-viewport ✅

if-wide-viewport ✅

if-narrow-viewport if-medium-viewport ✅

if-medium-viewport if-wide-viewport ✅