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.
HTML
<!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;" >w3wiki</ 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.
HTML
<!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" >w3wiki</ 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/