×
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
1687    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.
Mahatma Gandhi
By education, I mean all-around drawing of the best in child and man in body, mind and sprit.
Mahatma Gandhi
537
23.83
Today So Far
Total View (Lakh)
softetechnologies
01/01/2018     30778
28/06/2017     25550
02/08/2017     22003
26/05/2018     19717
15/05/2017     19354
06/07/2017     17901
21/04/2018     16863
01/08/2017     16539
01/07/2017     14553
25/04/2018     13617
softetechnologies