×
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
1771    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.
Nelson Mandela
An educated, enlightened and informed population is one of the surest ways of promoting the health of a democracy.
Nelson Mandela
957
27.09
Today So Far
Total View (Lakh)
softetechnologies
01/01/2018     32016
28/06/2017     27107
02/08/2017     24057
26/05/2018     22400
15/05/2017     20704
06/07/2017     19660
01/08/2017     17964
21/04/2018     17537
01/07/2017     15044
25/04/2018     14306
softetechnologies