Bootstrap 5 Visibility

Last Updated : 10 Apr, 2024

Bootstrap 5 regulates element visibility without changing display content. Set the visibility of an element with our web page visibility utilities. The visibility utilities do not change the display value and hide information from most users while retaining it for screen readers. It helps to appear and disappear required content as per format.

Bootstrap 5 uses the “visible” or “invisible” class for the visibilities. The “visible” class shows the content, and the “invisible” hide the required content.

Visibility used Classes:

Class	Description
.visible	Shows data or visible content on the web page. By default set in the web application.
.invisible	Hides or disappears the content of the application.

Syntax:

// Visible content of the web page
<div class = "visible"> content. </div>

// Invisible content of the web page
<div class = "invisible"> content. </div>

Example 1: Here is an example of the visible class of Bootstrap 5. It is the default setting on the display content.

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>
            Bootstrap visibility Example
        </title>
        <meta charset="utf-8" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1"
        />
        <link
            href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css"
            rel="stylesheet"
        />
        <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js">

        </script>
    </head>

    <body>
        <div class="text-center">
            <strong
                >Bootstrap 5 Visibility</strong
            >
        </div>
        <div class="container mt-4">
            <p class="visible bg-warning">
                Bootstrap 5 regulates element
                visibility without changing
                display content. Set element
                visibility with our web page
                visibility utilities. The
                visibility utilities do not change
                the display value and hide
                information from most users while
                retaining it for screen readers.
            </p>
        </div>
    </body>
</html>

Output:

Bootstrap 5 Visibility Example Output

Example 2: Here is an example of the invisible class of Bootstrap 5. The content does not display on the web page but is available on the Html page.

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>
            Bootstrap visibility Example
        </title>
        <meta charset="utf-8" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1"
        />
        <link
            href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css"
            rel="stylesheet"
        />
        <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js">

        </script>
    </head>

    <body>
        <div class="text-center">
            <strong
                >Bootstrap 5 Visibility</strong
            >
        </div>
        <div class="container mt-4">
            <p class="invisible bg-warning">
                Bootstrap 5 regulates element
                visibility without changing
                display content. Set element
                visibility with our web page
                visibility utilities.
            </p>
            <p>
                The visibility utilities do not
                change the display value and hide
                information from most users while
                retaining it for screen readers.
            </p>
        </div>
    </body>
</html>