Open In App

How to create Jumbotron using Bootstrap 5 ?

Improve
Improve
Like Article
Like
Save
Share
Report

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



Last Updated : 15 Sep, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads