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.
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.
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.
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.
