A Bootstrap Jumbotron is a special div in the page. It show some special contain in it which are easily attract the user. By default it creates a round corner, gray colored box. We can set the background of the jubbotron with any image, slider or video. Moreover, we can easily put any valid bootstrap, HTML, PHP codes in it. To implement it we must place a div with the class name .jumbotron. It is specially used for the creating the heading of the page.

<div class="container">
<div class="jumbotron">
</div>
</div>

Bootstrap Jumbotron Without Text

Adding Text in Bootstrap Jumbotron

Now, in step 2 we put some Heading and paragraph in it.

<div class="container">
<div class="jumbotron">
<h1><strong>Tutorial at Home</strong></h1>
<p>Free Tutorial for all</p>
</div>
</div>

Set a back ground to the Bootstrap jumbotron

<div class="container">
<div class="jumbotron" style="background-image: url(coffee.jpg); background-size: 100%;">
<h1 style="color:#620000">Tutorial at Home</h1>
<p>Have a cup of coffee</p>
</div>
</div>

We can easily put the jumbotron div at outside the container div for extends the screen edges.

<div class="jumbotron" style="background-image: url(coffee.jpg); background-size: 100%;">
<h1 style="color:#620000">Tutorial at Home</h1>
<p>Have a cup of coffee</p>
</div>
<div class="container">

</div>

Jumbotron Fluid

We can create a full width jumbotron using .jumbotron-fluid class.

<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-3">Tutorial At Home</h1>
<p class="lead">On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document. </p>
</div>
</div>