Create a jumbotron in bootstrap 5

In this post, we will see how we can create a jumbotron using bootstrap. Jumbotron is not supported in bootstrap 5. But we can still create a jumbotron using some helper classes.

What is a jumbotron?

A jumbotron is like a big box that you can use to show some special content to your site visitors.

In other words, if you wanna grab users’ attention to some special content or information then use jumbotron.

Now, let me show you a screenshot of my browser window with a page that I have created. Here’s the screenshot.

You can see in the image above, I have created a jumbotron with a background image and some text. I have also created a Navbar with some navigation menus and a logo image. So now let’s see the HTML and CSS for it.

index.html

<!DOCTYPE html>
<html lang="en">
   <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <title>Watch</title>

    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="styles.css">
    
   </head>

   <body>
       <nav class="navbar navbar-dark navbar-expand-sm fixed-top">
           <div class="container ps-5">
               <a class="navbar-brand ms-5" href="index.html"><img src="logo.png" alt="logo" width="41" height="31"></a>
                <ul class="navbar-nav me-auto">
                    <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Products</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">About</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
                </ul>
               
           </div>
       </nav>

       <header class="container-fluid text-white">
           <div class="container">
               <div class="row row-header ">
                   <div class="col-5 offset-1">
                       <h2>Check out our Latest Collection</h2>
                       <p>Get 15% off on your first order</p>
                   </div>
               </div>
           </div>
        
    </header>
   </body>

</html>

I have used <header> tag here (you can also use <div>) and applied bootstrap container-fluid class and customized this to include an image.

Now I am going to share with you the CSS file.

styles.css

.navbar-dark{
    background-color: #2C2C2C;
}

.container-fluid{
    background-image: url(time.jpg);
    padding: 70px 30px 70px 30px;
    height: 300px;
    
}

.row-header{
    margin: 0px auto;
}

body{
    padding: 50px 0px 0px 0px;
}

I have customized container-fluid to include an image and given a height of 300px.

That’s all about jumbotron in bootstrap.

Goodbye.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: