Bootstrap 5 Visually hidden
Last Updated :
03 Jan, 2023
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.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link href=
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<script src=
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:
Bootstrap 5 Visually hidden
Example 2: In this example, we will use the visually-hidden-focusable class.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link href=
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<script src=
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:
Bootstrap 5 Visually hidden
Reference: https://getbootstrap.com/docs/5.0/helpers/visually-hidden/
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...