Signup/Sign In
LAST UPDATED: MAY 9, 2021

Bootstrap Jumbotron

In this tutorial, we are going to discuss one more component of Bootstrap ie, Jumbotron. It is a lightweight grey box for displaying the key contents of the websites. It increases the size of the contents. An example of jumbotron is the sale advertisement published on marketing websites.

Creating a Bootstrap Jumbotron

To create a jumbotron

  • Add .jumbotron under <div> class.
  • Add HTML tags to add contents to jumbotron.
  • It uses utility classes for typography and spacing to space contents.

Let us see an example of creating a jumbotron.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Bootstrap </title>
	<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>Jumbotron</h1>
		<p>We have successfully created jumbotron...</p>
	</div>
</body>
</html>

Output:

Here is the output of the above program.

jumbotron

Alignment Jumbotron

Example: Aligning Jumbotron using Bootstrap

You can align the contents of the jumbotron using alignment properties. Here we have added .text-center to .jumbotron class to align content in the center.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Bootstrap </title>
	<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 text-center" >
		<h1>Jumbotron</h1>
		<p>We have used alignment properties in jumbotron</p>
	</div>
</body>
</html>

Output:

Here is the output of the above program.

Align jumbotron

Jumbotron's Width

Example: Specifying the Width of the Jumbotron using Bootstrap

For a full-width view of the jumbotron without rounded corners, use the .jumbotron-fluid modifier class. Add a .container class or .container-fluid class inside .jumbotron-fluid class. let us demonstrate it in the program given below.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Bootstrap </title>
	<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 jumbotron-fluid text-center" >
		<div class="container-fluid">
			<h1>Jumbotron</h1>
			<p>Full width jumbotron</p>
			<p><a class="btn btn-primary btn-lg" href="#" role="button">Read more</a></p>
		</div>
	</div>
</body>
</html>

Output:

In the above program, we have shown how to create a full-width jumbotron.

full width jumbotron

Conclusion

So now we know how to create a jumbotron and align it to a different position. The width of the jumbotron can be changed from a fixed width to full width. It is easy to include jumbotron using Bootstrap.



About the author: