Bootstrap Jumbotron

In bootstrap, Jumbotron is a lightweight, tiny grey rounded corners box to showcase some important information that wants to seek the user's attention.

 

To create a jumbotron, use <div> element with .jumbotron class as shown below.

 

Live Preview <div class="jumbotron">
    <h1>Hi, Welcome</h1>
    <p class="lead">Tutlane.com is an eLearning organization providing quality online tutorials, articles, and information related to the latest information technology and non-technical subjects.</p>
    <hr>
    <a class="btn btn-success btn-lg" href="#" role="button">Start Learning</a>
</div>

The above example will return the result as shown below.

 

Bootstrap Jumbotron example result

We can place all the valid HTML elements in jumbotron, including bootstrap elements, based on our requirements.

Bootstrap Full Width Jumbotron

If you want to make jumbotron full-width and without rounded corners, you have to add .jumbotron-fluid class to <div> element and add .container or .container-fluid element inside of jumbotron like as shown below.

 

Live Preview <div class="jumbotron jumbotron-fluid">
    <div class="container">
        <h1>Hi, Welcome</h1>
        <p class="lead">Tutlane.com is an eLearning organization providing quality online tutorials, articles, and information related to the latest information technology and non-technical subjects.</p>
<hr>
        <a class="btn btn-success btn-lg" href="#" role="button">Start Learning</a>
    </div>
</div>

The above example will return the result as shown below.

 

Bootstrap full width jumbotron example result

 

This is how we can use bootstrap jumbotron in our applications to create lightweight content showcasing units based on our requirements.