How to create a Jumbotron in Bootstrap 5?
Jumbotron is a lightweight grey box for displaying the key contents of the websites. It increases the size of the contents. The previous version of Bootstrap 4 had a separate class to create a Jumbotron. But it has been removed in Bootstrap 5 as it can be created using classes of Bootstrap 5.
Here, we will first create a jumbotron using the jumbotron class in bootstrap 4 and then replicate it using utilities in Bootstrap 5.
Creating jumbotron in Bootstrap 4
Bootstrap 4 used the .jumbotron class to create the jumbotron. Use the HTML elements and Bootstrap classes to add content within the jumbotron.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron">
<h1 class="display-4">Jumbotron</h1>
<p class="lead">This is a jumbotron created using the bootstrap 4</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</div>
</body>
</html>
Output:
Here is the output of the above program.
Creating Jumbotron using Bootstrap 5
To reimplement jumbotron using Bootstrap 5 just add the .container-fluid class and add a bg-light background color with some padding to the container class. And then use bootstrap utility classes and HTML elements to add the contents in it.
<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.min.js" ></script>
</head>
<body>
<div class="container-fluid bg-light p-5">
<h1 class="display-4">Jumbotron</h1>
<p class="lead">This is a jumbotron created using the bootstrap 5</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</div>
</body>
</html>
Output:
Here is the output of the above program.
Conclusion
So we can easily create a Jumbotron using Bootstrap 5 classes and utilities. There is no need to add any extra components for creating a Jumbotron.
