The visibility of individual elements can be adjusted for each screen sizes.

Hiding

Hidden

Using the hidden class, the element is hidden from the users and the screen readers. There are also size-specific equivalents of this class to only hide elements at specific sizes:

Visually hidden

Using the visuallyhidden class, the element is hidden from the users only, but still be visible to screen readers. There are also size-specific equivalents of this class to only hide the elements at specific sizes:

Hidden from screen readers

If you add the role="presentation" attribute on an element, it will be ignored by screen readers but still shown to normal users.

Visible

Elements that have been hidden by default can be made visible at specific sizes using the following classes:

The same goes for visuallyhidden elements: