---
title: "Jumbotron in Bootstrap"  
description: "Jumbotron in Bootstrap"  
author: "Ethan Karla"  
published: 2021-07-28  
updated: 2021-07-28  
canonical: https://www.mindstick.com/forum/156602/jumbotron-in-bootstrap  
category: "bootstrap"  
tags: ["bootstrap"]  
reading_time: 2 minutes  

---

# Jumbotron in Bootstrap

What is the use of [Jumbotron class](https://answers.mindstick.com/qa/93855/what-is-the-use-of-jumbotron-class-in-bootstrap) in [Bootstrap](https://www.mindstick.com/articles/1555/image-viewer-using-bootstrap-carousel)?

## Replies

### Reply by Anonymous User

Jumbotron is a lightweight, flexible component in Bootstrap that you can use to display the key features of your website in a highlighted way.

Let's take the example of a Jumbotron in Bootstrap to understand it better:

```
<!doctype html>
<html lang='en'>
<head>
    <!-- Required meta tags -->
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <!-- Bootstrap CSS -->
    <link href='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC' crossorigin='anonymous'>
    <title>Hello, world!</title>
</head>
<body>
    <div class='container'>
        <div class='jumbotron'>
            <h1 class='display-4'>Hello, world!</h1>
            <p class='lead'>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
            <hr class='my-4'>
            <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
            <p class='lead'>
                <a class='btn btn-primary btn-lg' href='#' role='button'>Learn more</a>
            </p>
        </div>
    </div>
    <!-- Optional JavaScript; choose one of the two! -->
    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js' integrity='sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM' crossorigin='anonymous'></script>
    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src='https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js' integrity='sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p' crossorigin='anonymous'></script>
    <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js' integrity='sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF' crossorigin='anonymous'></script>
    -->
</body>
</html>
```

Output :

![Jumbotron in Bootstrap](https://www.mindstick.com/mindstickforums/da562ad9-a193-45c5-b996-b7409e08a941/images/ea3a4770-4d03-47e8-a70e-e939db3fd05e.png)\

Hope this will help you why jumbotron is used.\

Happy Coding!


---

Original Source: https://www.mindstick.com/forum/156602/jumbotron-in-bootstrap

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
