Twitter Bootstrap Jumbotron Tutorial with Examples: Beginners Guide

Jumbotron is one of the best features of Twitter Bootstrap Framework and we'll see in this tutorial how to build bootstrap jumbotron with background images. It is a light weight component that can be used to showcase the featured content of websites. You can also add a compelling call-to-action to the component. All sorts of websites especially commerce sites can get beneficial by using bootstrap jumbotron unit in their landing pages, and make the user to take desired action.

If you want to learn more about customizing bootstrap framework, read through our earlier tutorials on similar topic.

1. Change Bootstrap Navbar Color, Text & Hover Color
2. How to Customize Bootstrap Breadcrumb Styles
3. How to Create Bootstrap Buttons with Icons

Now coming back to bootstrap jumbotron tutorial let us see some examples.

Bootstrap Jumbotron Examples

To build jumbotron unit to your landing pages, add a <div> block to the page and include the css class ".jumbotron" to it. This places an outer wrapper for the jumbotron unit. Next add necessary heading and text to it with <h1> and <p> element as usual. Finally add an anchor link with css classes ".btn", ".btn-success" and ".btn-lg" to make the link to look like a button. Use the href attribute of the link to redirect the user on click to the url of your choice.

<div class="container">
    <div class="jumbotron">
        <h1>Nature</h1>
        <p>Breathtaking Nature Stock Photos for FREE!</p>
        <p><a href="#" class="btn btn-success btn-lg">Click Here »</a></p>
    </div>
</div>

The above html markup will give you a simple text based jumbotron.

Add Background Image to Bootstrap Jumbotron

Do you want to add background image to this jumbotron component? Then you have to override the bootstrap's ".jumbotron" css class.

The easy way to do is to create a new style sheet and add this piece of code to it.

.jumbotron {
    /* add bootstrap jumbotron background image */
    background: url("images/banner.jpg");
    /* change bootstrap jumbotron text color */
    color: #FFF;
}

Two style renovations have been added above to the jumbotron class. One is to add a background image to its container and the second one to change the text color to white to make it stand out from the background image.

Just name your new style sheet as "custom.css" and link it after the "bootstrap.min.css" file in the landing page. And you are done!

Here is the new bootstrap jumbotron with a nice background image.

Make Jumbotron to Full Width of the View Port

Want the bootstrap jumbotron unit to span to the full width of the view port (screen) and without rounded corners? Just place the jumbotron outside all the container class and instead add ".container" class within jumbotron like this.

<div class="jumbotron">
    <div class="container">
        <h1>Nature</h1>
        <p>Breathtaking Nature Stock Photos for FREE!</p>
        <p><a href="#" class="btn btn-success btn-lg">Click Here »</a></p>
    </div>
</div>

Now we get the full width jumbotron without left and right padding.

Those are the simple bootstrap customizations you can do in seconds to build bootstrap jumbotron with background images.

Also Read:

• How to Build Image Slider (Carousel) in Boostrap
• How to Create Boostrap Search Box with Icon
• Bootstrap Scrollable Table with Fixed Header

And that was all about using twitter bootstrap jumbotron plug-in.