BootStrap5 Reboot HTML5 [hidden] Attribute

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:

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>

Output: As you can see the first input field is not visible.

Reference: https://getbootstrap.com/docs/5.0/content/reboot/#html5-hidden-attribute

BootStrap5 Reboot HTML5 [hidden] Attribute

Explore