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.
<!DOCTYPE html>
<html lang="en">
<head>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous">
</script>
</head>
<body>
<div style="text-align:center;">
<h1 style="color: green;">GeeksforGeeks</h1>
<strong>Bootstrap 5 Visually hidden</strong>
<br/>
<h2 class="visually-hidden">
GFG(This text would be visually hidden to the users)
</h2>
</div>
</body>
</html>
Output:
Example 2: In this example, we will use the visually-hidden-focusable class.
<!DOCTYPE html>
<html lang="en">
<head>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous">
</script>
<style>
form:focus-within {
background: green;
}
</style>
</head>
<body>
<center>
<div>
<h1 class="text-success">GeeksforGeeks</h1>
<h2>Bootstrap 5 Visually hidden</h2><br><br>
<form>
<label>GFG</label>
<a type="text" class="visually-hidden-focusable">
A container with a <a href="#">focusable element</a>.
</a>
</form>
</div>
</center>
</body>
</html>
Output:
Reference: https://getbootstrap.com/docs/5.0/helpers/visually-hidden/
