deCODE - Our Newsletter for Jan 2022 is available for Download. 🗞   🥳
  Signup/Sign In

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.

Jumbotron using Bootstrap 4

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.

Jumbotron using Bootstrap 5

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.