Bootstrap 5 UtilitiesToggle visibility

Last Updated : 06 Jun, 2023

Bootstrap 5 regulates element visibility without changing display content. In Bootstrap 5 the visibility of an element can be changed without using any display properties but by using the Utilities Toggle visibility classes. The display and layout properties of an element don’t get changed due to these classes. In Bootstrap the default value of visibility of all the elements is visible. When the .invisible class is used it is hidden visually and for assistive technologies.

Syntax:

<div class="visible/invisible">
    ...
</div>

Bootstrap 5 UtilitiesToggle visibility used Classes:

visible: This class is used to set the visibility of an element to enable.
invisible: This class disables the visibility of an element to make it invisible.

Example 1: The code below demonstrates the change in visibility by the implementation of the Utilities Toggle visibility of a button by clicking itself. Here using JavaScript, a function is called on click of the button to change the class of the button to ‘invisible’:

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"> 
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"> 
    </script> 
</head> 
  
<body> 
    <h1 class="m-4 text-success"> 
        GeeksforGeeks 
    </h1> 
  
    <h4 class="ms-4"> 
        Bootstrap 5 UtilitiesToggle visibility 
    </h4> 
  
    <div class="container p-5 mt-5 bg-light text-center"> 
        <button class="btn btn-success" 
            onclick="changeClass()" id="myButton"> 
            Click and make me disappear! 
        </button> 
    </div> 
  
    <script> 
        function changeClass() { 
            var btn_class = document 
                .getElementById('myButton').className; 
  
            document.getElementById('myButton') 
                .className = "invisible"; 
        } 
    </script> 
</body> 
  
</html>

Output:

Example 2: The code below demonstrates how the visibility of a card is toggled using a button in JavaScript while implementing Utilities Toggle visibility:

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"> 
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"> 
    </script> 
</head> 
  
<body> 
    <h1 class="m-4 text-success"> 
        GeeksforGeeks 
    </h1> 
  
    <h4 class="ms-4"> 
        Bootstrap 5 UtilitiesToggle visibility 
    </h4> 
      
    <div class="container p-4 d-flex"> 
        <div class="card w-25 ms-5"> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220219163921/gfglogo-300x300.png"
                class="card-img-top" alt="..."> 
  
            <div class="card-body"> 
                <h5 class="card-title"> 
                    This is a demo card 
                </h5> 
                  
                <p class="card-text"> 
                    This card's visibility cannot be  
                    toggled using the button below. 
                </p> 
            </div> 
        </div> 
        <div class="card w-25 ms-5" id="myCard"> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
                class="card-img-top" alt="..."> 
            <div class="card-body"> 
                <h5 class="card-title"> 
                    This is another demo card 
                </h5> 
                <p class="card-text"> 
                    This card's visibility can be  
                    toggled using the button below. 
                </p> 
            </div> 
        </div> 
        <div class="card w-25 ms-5"> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220219163921/gfglogo-300x300.png"
                class="card-img-top" alt="..."> 
            <div class="card-body"> 
                <h5 class="card-title"> 
                    This is the last demo card 
                </h5> 
                <p class="card-text"> 
                    This card's visibility cannot be  
                    toggled using the button below. 
                </p> 
            </div> 
        </div> 
    </div> 
    <button class="btn btn-danger ms-5" 
        onclick="changeClass()"> 
        Toggle Middle Card's Visibility 
    </button> 
    <br> 
    <script> 
        function changeClass() { 
            var card_class = document 
                .getElementById('myCard').className; 
  
            if (card_class == "invisible w-25") { 
                document.getElementById('myCard') 
                    .className = "card w-25  ms-5"; 
            } 
            else { 
                document.getElementById('myCard') 
                    .className = "invisible w-25"; 
            } 
        } 
    </script> 
</body> 
  
</html>