Visibility Classes (Responsive)

.show-for-x

You are on a small screen or larger.

You are on a medium screen or larger.

You are on a large screen or larger.

.hide-for-x

You are not on a medium screen or larger.

You are not on a large screen or larger.

.hide-for-x only

You are definitely not on a small screen.

You are definitely not on a medium screen.

You are definitely not on a large screen.

.hide, .invisible

Can't touch this.

Can sort of touch this.

.show-for-[portrait, landscape]

You are in landscape orientation.

You are in portrait orientation.

.show-for-sr

This text can only be read by a screen reader.

There's a line of text above this one, but it can only be read by a screen reader.

.show-on-focus

Skip to Content