Open In App

Bootstrap 5 Visually hidden

Last Updated : 03 Jan, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

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/



Previous Article
Next Article

Similar Reads

ReactJS MDBootstrap Visually Hidden Utilities
MDBootstrap is a Material Design and bootstrap-based react UI library that is used to make good-looking webpages with its seamless and easy-to-use component. In this article, we will know how to use Visually Hidden Utilities in ReactJS MDBootstrap. The Visually Hidden Utilities allows a user to hide the content visually. Syntax: &lt;p className="vi
1 min read
Chakra UI Disclosure Visually Hidden
The Chakra UI Disclosure Visually Hidden Component facilitates content concealment while conveying information to screen readers, enhancing accessibility in disclosure patterns. Practical examples demonstrate its utility effectively. Prerequisites:NPM &amp; Node JSReact JSReact JS Chakra UIApproach:We have created a Chakra UI Disclosure Visually Hi
2 min read
Difference between 'hidden' and 'aria-hidden' attributes in HTML
The HyperText Markup Language (HTML) is a powerful web development tool combined with CSS and JavaScript. Apart from these, HTML also uses Accessible Rich Internet Application (ARIA) to make web content affable for a person with disabilities. Although ARIA is beneficial, there are keywords common to both HTML and ARIA, creating perplexity among ama
2 min read
How to hide an Element Visually but keep it Accessible in CSS?
Hiding an element visually while keeping it accessible for screen readers and assistive technologies involves using CSS techniques. This ensures that the content remains available to users who rely on non-visual interfaces. Table of Content Using visibility: hidden;Using opacity: 0;Using position: absolute;Using visibility: hidden;The element becom
1 min read
HTML | DOM Input Hidden value Property
The Input Hidden value property in HTML DOM is used to set or return the value of the value attribute of the hidden input field. The value attribute defines the default value of the input hidden field. Syntax: It returns the value property.hiddenObject.valueIt is used to set the value property.hiddenObject.value = text Property Values: This propert
2 min read
HTML | DOM Input Hidden type Property
The DOM input Hidden type Property is used for returning the type of form element the hidden input field is. The Input Hidden type returns a string value which represents the type of form element the hidden input field is.Syntax: hiddenObject.type Return Values: It returns a string value which defines the type of form element the input hidden field
1 min read
How to create a hidden input field in form using HTML ?
In this article, we will learn how to add a hidden input field into our form using HTML. A hidden control stores the data that is not visible to the user. It is used to send some information to the server which is not edited by the user. Normally, this hidden field usually contains the value which is common for all the users. The value must be reco
2 min read
HTML | DOM Input Hidden Object
The Input Hidden object in HTML DOM represents the &lt;input&gt; element with type = “hidden” attribute. The element can be accessed by using getElementById() method.Syntax: document.getElementById("id"); where id is assigned to the &lt;input&gt; tag.Property Values: defaultvalue: It is used to set or return the default value of a hidden input fiel
2 min read
HTML | DOM Input Hidden form Property
The Input Hidden form property is used to return the reference of the form containing the Input Hidden field. It is read-only Property that returns a form object on success. Syntax: hiddenObject.form Return Values: It returns a string value which specify the reference of the form containing the Input Hidden field Below Program that illustrates the
1 min read
HTML | DOM Input Hidden name Property
The Input Hidden name property in HTML DOM is used to set or return the value of the name attribute. The form data which has been submitted to the server can be identified by the name attribute. The name attribute is also used for referencing form data on the client side using JavaScript. Syntax: It returns the Input Hidden name property. hiddenObj
2 min read