Introduction
While developing websites and web apps using bootstrap. There are times when the developer wants the attention of the reader to specific content. Such situations can be easily taken care of with the help of the page header concept and jumbotron component of the bootstrap.
Both classes are provided by bootstrap to give an attractive look to specific content like headers and other text which require attention from the reader. Let's look at a jumbotron and page header following how to use them in our project.
Jumbotron
A jumbotron is a box that adds to the attractiveness of a particular text or HTML content enclosed inside it. It is colored grey and is sized big compared to the rest of the page with enlarged text. It is a lightweight, adaptable element that may span the entire viewport to highlight your site's most crucial marketing messaging.
Follow the given below steps to create a Jumbotron.
Step 1: Create a div element, and link HTML to bootstrap style and script as shown below.
Step 2: Add "jumbotron" to this div element's class list
Step 3: Now, put any HTML content inside of it.
<div class="jumbotron"> any content </div>
Program
<!DOCTYPE html>
<html lang="en">
<head>
<title>Jumbotron</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h3>Jumbotron</h3>
<p class="lead">Experience the world of Bootstrap</p>
<p>
<a class="btn btn-primary btn-success" href="#" role="button">Log In</a>
</p>
</div>
</div>
</body>
</html>Output
Full Width Jumbotron
If we want content inside to jumbotron to extend to its full width, add the "jumbotron-fluid" class to the class with "jumbotron" as well.
Program
<!DOCTYPE html>
<html lang="en">
<head>
<title>Jumbotron</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="m-4">Jumbotron</h1>
<p class="m-4">Experience the world of Bootstrap</p>
<a class="m-4 btn btn-primary btn-success" href="#" role="button">Log In</a>
</div>
</div>
<div class="container">
<p>Connect and learn more.</p>
</div>
</body>
</html>Output
85+ registered