« Previous Next »

What is Jumbotron?

In Bootstrap, a Jumbotron is a large, full-width component used to highlight important content on a webpage. It typically contains a headline, a subheading, some descriptive text, and a call-to-action button. The jumbotron creates a "hero" section on the page, often used to grab the user's attention with key information or marketing content.

Why uses Jumbotron?

A jumbotron is a prominent section in web design used to grab user attention, highlight key information, and create a focal point on a webpage. It enhances visual appeal with large text, striking backgrounds, and customizable features, often including a call-to-action button to encourage user engagement. Jumbotrons are responsive, ensuring they look great on all devices, making them ideal for landing pages, e-commerce sites, and personal portfolios. Their ease of implementation with frameworks like Bootstrap allows designers to quickly add impactful sections that effectively communicate important messages or offers to visitors.

Jumbotron Code Examples


      <!DOCTYPE html>
       <html lang="en">
       <head>
           <title>Bootstrap Jumbotron Example</title>
           <meta charset="UTF-8">
           <meta name="viewport" content="width=device-width, initial-scale=1.0">
           <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
       </head>
       <body>
       
       <div class="container mt-5">
       
           <!-- Basic Jumbotron -->
           <div class="jumbotron text-center bg-light">
               <h1 class="display-4">Welcome to Our Website!</h1>
               <p class="lead">Explore our features and services.</p>
               <hr class="my-4">
               <p>Find out more about what we offer.</p>
               <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
           </div>
       
           <!-- Jumbotron with Images -->
           <div class="jumbotron text-center bg-light">
               <h1 class="display-4">Explore Nature</h1>
               <p class="lead">Discover the beauty of the natural world.</p>
               
               <div class="d-flex justify-content-center mb-4">
                   <div class="text-center me-3">
                       <img src="Flower.jpg" class="img-fluid rounded" alt="Flower" style="width: 50px; height: 50px;">
                       <h5>Flower</h5>
                   </div>
                   <div class="text-center">
                       <img src="sea.jpg" class="img-fluid rounded" alt="Sea" style="width: 100px; height: 100px;">
                       <h5>Sea</h5>
                   </div>
               </div>
       
               <hr class="my-4">
               <p>Join us in exploring the wonders of the earth.</p>
               <a class="btn btn-success btn-lg" href="#" role="button">Get Started</a>
           </div>
       
           <!-- Jumbotron with Background Image -->
           <div class="jumbotron" style="background-image: url('background.jpg'); background-size: cover; color: white;">
               <h1 class="display-4">Adventure Awaits!</h1>
               <p class="lead">Step into the world of adventure and exploration.</p>
               <hr class="my-4">
               <p>Join our community and discover amazing places.</p>
               <a class="btn btn-light btn-lg" href="#" role="button">Join Us</a>
           </div>
       
       </div>
       
       <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
       </body>
       </html>

Output Example

Welcome to Our Website!

Explore our features and services.

Find out more about what we offer.

Learn more

Explore Nature

Discover the beauty of the natural world.

Flower
Flower
Sea
Sea

Join us in exploring the wonders of the earth.

Get Started

Adventure Awaits!

Step into the world of adventure and exploration.

Join our community and discover amazing places.

Join Us
« Previous Next »