Jumbotron
If we want to attract the viewers attention to any special information than we can write it inside ‘Jumbotron’ which is the grey box. And we use .jumbotron class for it.
Let’s understand them by this program :-
<!DOCTYPE html>
<html lang="en">
<head>
<title>bootstrap 4 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/
[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/
[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/
[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/
[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h2> Jumbotron </h2>
<div class="jumbotron">
<h5> A grey color box </h5>
<p> Hello is is the jumbotron </p>
</div>
</div>
</body>
</html>
Output of this Program
Here through jumbotron we give special attraction to our content.
