BOOTSTRAP BASIC
BOOTSTRAP ADVANCED
BOOTSTRAP EXAMPLES
BOOTSTRAP ARCHIVE
SPONSORED LINKS
Advertisements

Bootstrap Jumbotron

In this tutorial you will learn how to use Bootstrap jumbotron component.

Showcasing Contents with Jumbotron

The Bootstrap jumbotron component provides an excellent way to showcase the key content or information on a web page. Just wrap your featured content like heading, descriptions etc. in a <div> element and apply the class .jumbotron on it.

<div class="jumbotron">
    <h1>Learn to Create Websites</h1>
    <p class="lead">In today's world internet is the most popular way of connecting with the people. At <a href="https://www.tutorialrepublic.com" target="_blank">tutorialrepublic.com</a> you will learn the essential of web development technologies along with real life practice example, so that you can create your own website to connect with the people around the world.</p>
    <p><a href="https://www.tutorialrepublic.com" target="_blank" class="btn btn-primary btn-lg">Start learning today</a></p>
</div>

— The output of the above example will look something like this:


Creating Full Page Width Jumbotron

To create a jumbotron without rounded corners and that covers the full width of the viewport, place it outside all the containers, add the .jumbotron-fluid modifier class on it, and add a .container or .container-fluid within it, as shown in the following example:

<div class="jumbotron jumbotron-fluid">
    <div class="container">
        <h1>Learn to Create Websites</h1>
        <p class="lead">In today's world internet is the most popular way of connecting with the people...</p>
        <p><a href="#" class="btn btn-primary btn-lg">Start learning today</a></p>
    </div>
</div>
Advertisements

Your Feedback:

We would love to hear from you, please drop us a line.