×
FREE ASSISTANCE FOR THE INQUISITIVE PEOPLE
Tutorial Topics
X
softetechnologies
Bootstrap Badges [ use of .badge class ] Bootstrap Navbar or Navigation Bar or Menubar I
Bootstrap Jumbotron [ A Big Highlighted Container ] - Bootstrap 3
1939    Arnab De    17/05/2017

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.

softetechnologies

<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>

softetechnologies
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>

softetechnologies
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

Bootstrap Badges [ use of .badge class ] Bootstrap Navbar or Navigation Bar or Menubar I
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.
Enter New Comment
Comment History
No Comment Found Yet.
Rabindranath Tagore
Depth of friendship does not depend on length of acquaintance.
Rabindranath Tagore
2804
34.21
Today So Far
Total View (Lakh)
softetechnologies
01/01/2018     33611
28/06/2017     29530
02/08/2017     27024
26/05/2018     26988
15/05/2017     23239
06/07/2017     21773
01/08/2017     21320
25/06/2018     20157
21/04/2018     18620
14/07/2017     16474
softetechnologies