Bootstrap Jumbotron कुछ विशेष सामग्री या जानकारी पर अतिरिक्त ध्यान देने के लिए एक बड़े Box को Specified करता है. इसे Rounded Corners के साथ एक Grey Box के रूप मे दिखाया जाता है. इसका उपयोग अंदर के Text के Font Sizes को बढ़ाने के लिये भी किया जाता है.
Bootstrap Jumbotron एक Lightweight, Flexible Component को specify करता है जो कि Alternative रूप से हमारी Website पर संदेशो के पूरे Viewport को बढ़ा सकता है. यह Default Grey Color का होता है और Text के Font Sizes को बढ़ाता है यह <div> Element के साथ उपयोग किया जाता है.
<!DOCTYPE html>
<html>
<head>
<title>Jumbotron inside container Example</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>Jumbotron inside container!</h1>
<p>Lorem Ipsum is simply dummy text of the printing and
typesetting industry.</p>
</div>
<p>This is Tutorialsroot.</p>
<p>This is Tutorialsroot.com.</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Jumbotron outside container Example</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>Jumbotron outside container!</h1>
<p>Lorem Ipsum is simply dummy text of the printing and
typesetting industry.</p>
</div>
<p>This is Tutorialsroot.</p>
<p>This is Tutorialsroot.com.</p>
</div>
</body>
</html>
Bootstrap मे Glyphicons का उपयोग विभिन्न प्रकार के Glyphicons के लिए किया जाता है और यह Web Project मे उपयोग किया जाता है. यह Glyphivons Halflings Set से 260 Glyphicons Provide करता है.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Glyphicons Example</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container">
<p>Print icon: <span class="glyphicon glyphicon-print"></span></p>
<p>Print icon on a styled link button:
<a href="#" class="btn btn-success btn-lg">
<span class="glyphicon glyphicon-print"></span> Print
</a>
</p>
</div>
</body>
</html>