BootStrap5 Reboot HTML5 [hidden] Attribute

Last Updated : 14 Dec, 2022

BootStrap5 Reboot HTML5 [hidden] attribute is used to hide the section you want to not be rendered on the web page. This plays the same role as CSS display: hidden”; does. Bootstrap brings this feature by noticing the Pure CSS Hiding Elements feature.

Bootstrap 5 Reboot HTML5 [hidden] Attribute Class: There is no class for this only HTML hidden attribute can be used to do this.

Bootstrap 5 Reboot HTML5 [hidden] attribute: Use HTML hidden attribute on any element that element and inside of that element every content will be hidden.

Syntax:

<element hidden> ... </element>

The below examples illustrate the BootStrap 5 Reboot HTML5 [hidden] attribute:

Example 1: In this example, we will create a form that holds two input fields, and the hidden attribute will be used on the form wrapper tag, so the form will not render at all.

HTML

<!DOCTYPE html> 
<html> 
  
<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"> 
</head> 
  
<body class="m-3"> 
    <center> 
        <h1 class="text-success"> 
            GeeksforGeeks 
        </h1> 
        <strong>BootStrap 5 Reboot HTML5 [hidden] Attribute</strong> 
        <form hidden> 
            <label for="fname">FirstName</label> 
  
            <input type="text" name="fname" 
                placeholder="enter your name" 
                required> 
            <label for="lname">LastName</label> 
            <input type="text" name="lname" 
                placeholder="enter your name" 
                required> 
        </form> 
    </center> 
</body> 
</html>

Output:

BootStrap5 Reboot HTML5 [hidden] attribute

Example 2: In this example, we will create two input fields, where one will be hidden and another one will be visible.

HTML

<!DOCTYPE html> 
<html> 
  
<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"> 
</head> 
<body class="m-3"> 
    <center> 
        <h1 class="text-success"> 
            GeeksforGeeks 
        </h1> 
        <strong>BootStrap 5 Reboot HTML5 [hidden] Attribute</strong> 
        <br> 
        <label for="fname">FirstName</label> 
        <input type="text" 
               name="fname" 
               placeholder="enter your name" 
               hidden> 
        <label for="lname">LastName</label> 
        <input type="text"
               name="lname" 
               placeholder="enter your name"> 
    </center> 
</body> 
  
</html>