Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD

Bootstrap jumbotron

Suggested Video Tutorials
Part 32 - Bootstrap well
Part 33 - Bootstrap labels and badges
Part 34 - Bootstrap progress bars



In this video we will discuss the Bootstrap jumbotron component.



The Bootstrap jumbotron component is generally used to showcase the key content on your website. The jumbotron is displayed as a grey box with rounded corners. To create a jumbotron all we need to do is create a <div> element that has the class jumbotron. You can then place any valid HTML within the jumbotron.
bootstrap jumbotron examples

<div class="container">
    <div class="jumbotron">
        <h1>Bootstrap Tutorial</h1>
        <p>
            Bootstrap is a free, open-source and is the most popular HTML, CSS,
            and JavaScript framework developed by twitter for creating
            responsive web applications.
        </p>
        <p>
            <a class="btn btn-lg btn-primary" href="http://youtube.com/kudvenkat">
                Get started
            </a>
        </p>
    </div>
</div>

To make the jumbotron span the entire width of the page, place it outside the container.

<div class="jumbotron">
    <div class="container">
        <h1>Bootstrap Tutorial</h1>
        <p>
            Bootstrap is a free, open-source and is the most popular HTML, CSS,
            and JavaScript framework developed by twitter for creating
            responsive web applications.
        </p>
        <p>
            <a class="btn btn-lg btn-primary" href="http://youtube.com/kudvenkat">
                Get started
            </a>
        </p>
    </div>
</div>

Changing the jumbotron background colour : To change the background colour of the jumbotron, change the background-color style in the jumbotron class in your custom stylesheet.

bootstrap change jumbotron background color

.jumbotron {
   background-color: #E3E33D;
}

bootstrap tutorial for beginners

1 comment:

If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.