Bootstrap Jumbotron

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

 

To create a jumbotron, use <div> element with .jumbotron class like 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 like as shown below.

 

Bootstrap Jumbotron example result

In jumbotron, we can place all the valid HTML elements 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 like 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 unit based on our requirements. 

 
 
 

Topics Covered