PUBLISHED ON: AUGUST 13, 2021
Responsive Bootstrap 4 jumbotron background image
Jumbotron is a lightweight grey box for displaying the key contents of the websites. It increases the size of the contents. It is used for displaying new offers on the webpage.
Let's see how we can create a jumbotron in Bootstrap.
Jumbotron in Bootstrap 4
We can create a jumbotron using the bootstrap 4 .jumbotron class. Use the HTML elements and Bootstrap classes to add content within the jumbotron.
Example: creating a jumbotron in bootstrap 4
In this example, we have added a jumbotron that has a gray background color.
<!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.
Adding a Background Image to the jumbotron
We can add a background image to the jumbotron using the CSS style sheet. Use .background-image : url("image_address") within the stylesheet. Here is an example to add a background image to the jumbotron.
Example: Background image within jumbotron
Here, we have added a background image 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>
<style>
.jumbotron {
background-image: url("p4.jfif");
background-size: cover;
}
</style>
</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.
Conclusion
We can add an image to jumbotron using CSS within Bootstrap 4. The .jumbotron class is not available in the latest version of bootstrap. The jumbotron contains text and images within it.
