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.
<!DOCTYPE html> < html >
< head >
< link href =
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.
<!DOCTYPE html> < html >
< head >
< link href =
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