Posted By
Bajarangi soft ,
Posted On 12-10-2020
This class of bootstrap is used to hide an element from the page. In the below program the heading h2 “Bootstrap Tutorial” is made hidden using this class. This class basically uses the visibility property of CSS and set it’s value to hidden. Even though the heading Bootstrap Tutorial is invisible, it’ll still take up space in the layout.
Example-1
<!DOCTYPE html>
<html>
<head>
<title>Bajarangi Soft</title>
<!-- Import Jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Import Bootstrap CSS and JS files -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<!-- Making invisible -->
<h1 class="invisible">Bootstrap Tutorial</h1>
<p>
Bootstrap is the most popular HTML, CSS, and
JS framework for developing responsive,
mobile-first projects on the web.
</p>
</div>
<p>This is some text.</p>
<p>This is another text.</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Bajarangi soft</title>
<!-- Import Jquery -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!-- Import Bootstrap CSS and JS -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</head>
<body><br>
<div class="container">
<div class="jumbotron">
<!-- Making visible -->
<h1 class="visible">BAJARANGI SOFT</h1>
<p>
Bootstrap is the most popular HTML, CSS,
and JS framework for developing responsive,
mobile-first projects on the web.
</p>
</div>
<p>This is some text.</p>
<p>This is another text.</p>
</div>
</body>
</html>