Bootstrap 5 Visually hidden

Bootstrap 5  Visually hidden are used to visually hide an element so that it does not display on the page while still allowing it to be exposed to assistive technologies. .The visually-hidden class hides the element by default and the visually-hidden-focusable class visually hides an element but displays it when it is focused. The visually-hidden-focusable class can also be applied to a container by using :focus-within, the container will be displayed when any child element of the container receives focus. Below are the used classes for visually hidden.

Bootstrap 5  Visually hidden Classes:

• visually-hidden: This class visually hides an element.
• visually-hidden-focusable: This class visually hides an element but displays it when it is focused.

Syntax:

<h2 class="Visually hidden Class">. . .</h2>

Example 1: In this example, we will use the visually-hidden class.

Output:

Example 2: In this example, we will use the visually-hidden-focusable class.

Output:

Reference: https://getbootstrap.com/docs/5.0/helpers/visually-hidden/