Bootstrap Jumbotron [ A Big Highlighted Container ]
17-05-2017    794 times
Bootstrap Jumbotron

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 .jumbotronIt is specially used for the creating the heading of the page.

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

Bootstrap Jumbotron Without Text Bootstrap Jumbotron Without Text

Adding Text in Bootstrap Jumbotron

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

Tutorial at home

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

Bootstrap Jumbotron With Text
Bootstrap Jumbotron With Text

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>

Tutorial at home
Bootstrap Jumbotron With Back Ground & Text
Bootstrap Jumbotron With Back Ground & Text

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>

Tutorial at home
Tutorial at home
Bootstrap Jumbotron out of container
Bootstrap Jumbotron out of container

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>

Bootstrap Jumbotron in container-fluid
Bootstrap Jumbotron in container-fluid

Video Tutorials

softetechnologies
    Author Details
Arnab De
I have over 16 years of experience working as an IT professional, ranging from teaching at my own institute to being a computer faculty at different leading institute across Kolkata. I also work as a web developer and designer, having worked for renowned companies and brand. Through tutorialathome, I wish to share my years of knowledge with the readers.
    Related Post
  Query About the post