Bootstrap Jumbotron is a responsive component whose main goal is to draw the visitor’s attention or highlight a special piece of information. Inside a Jumbotron, you can make use of almost any other Bootstrap code to further increase its engagement value.
Uses of Jumbotron:
- Image showcase
- Highlighting content
- Introduction for a Certain Topic
Approach:
- To create a Jumbotron bootstrap provides a class named “jumbotron”.
- Bootstrap uses some default properties applied to Jumbotron, making it a very good ‘eye-catcher’.
Example 1: Creating a simple Jumbotron:
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
</head>
<body>
<div class="jumbotron">
<h1>Text to catch user attention/greeting.</h1>
<p class="lead">lorem ipsum.</p>
<hr class="my-4">
<p>Some dummy text</p>
</div>
</body>
</html>
|
Output:
Example 2: To create a full-width Jumbotron we use the jumbotron-fluid class along with the Jumbotron class.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
</head>
<body>
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-4">Fluid jumbotron</h1>
<p class="lead">
This is a modified jumbotron that
occupies the entire horizontal
space of its parent.
</p>
</div>
</div>
</body>
</html>
|
Output
Example 3: We can also style the Jumbotron and add background images to make it more attractive as shown below.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<style>
.jumbotron-image {
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<div class="jumbotron text-white jumbotron-image shadow"
style="background-image: url(
);">
<h2 class="mb-4">
Jumbotron with background image
</h2>
<p class="mb-4">
Hey, check this out.
</p>
<a class="btn btn-primary">
Click!
</a>
</div>
</body>
</html>
|
Output
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
15 Sep, 2020
Like Article
Save Article