Bootstrap Jumbotron

Bootstrap Jumbotron: Bootstrap Jumbotron is big box which is used as landing page or used for displaying some specific information to draw the user’s attention.

Bootstrap Jumbotron is basically a special box which contains some useful information which can catch user’s attention.

.Jumbotron class is used to create Jumbotron in bootstrap.

Here is simple example of Bootstrap Jumbotron.

Bootstrap Jumbotron with example

<div class="container">
<div class="jumbotron">
<h1>Tutorialsplane My First Web </h1>
<p> Learn with online editor.</p>
</div>
<p>Learn More at Tutorialsplane.com.</p>
</div>

The above code will produce the following output-

Bootstrap Jumbotron Background Color

If you need colored background Jumbotron you can add style to change the background color.

<div class="container">
<div class="jumbotron amp-wp-inline-8d242d44713496ef132d3f1235ed49a9">
<h1>Tutorialsplane My First Web </h1>
<p> Learn with online editor.</p>
</div>
<p>Learn More at Tutorialsplane.com.</p>
</div>

The above code will produce the following code –

Bootstrap Jumbotron Background Image

Sometimes you need background image instead of background color in Jombortom you can add background image easily by adding following css as below.

<div class="container">
<div class="jumbotron customJumboBg">
<h1>Tutorialsplane My First Web </h1>
<p> Learn with online editor.</p>
</div>
<p>Learn More at Tutorialsplane.com.</p>
</div>

The above code will produce the following code –

Thus you can modify the defualt jombotron as per your need.You can customize the default jumbotron with background image, background color and different font style. You can also modify and add your custom font styles with the help of custom css.