How to create Jumbotron using Bootstrap 5 ?

Last Updated : 15 Sep, 2020

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=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        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=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" 
        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=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" 
        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(
https://media.geeksforgeeks.org/wp-content/uploads/20200914000601/gfg-300x200.jpg
 );">
        <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

How to create a navbar in Bootstrap ?

SnehashishKalamkar

Improve

Article Tags :

How to create Jumbotron using Bootstrap 5 ?

Similar Reads

Thank You!

What kind of Experience do you want to share?