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

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>

Try it »

The above code will produce the following output-

Bootstrap Jumbotron

Bootstrap Jumbotron Background Color

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

Colored Background Example

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

Try it »

The above code will produce the following code –

Bootstrap colored jomborton

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.

Image Background Example

<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>
<style type="text/css">
.customJumboBg{
background-image: url("http://tutorialsplane.com/wp-content/uploads/2015/03/bck.png");
}
</style>

Try it »

The above code will produce the following code –

bootstrap jumbotron background image

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.


Advertisements

Add Comment

📖 Read More