02.06.2015 Views

Bootstrap Tutorial

You also want an ePaper? Increase the reach of your titles

YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.

CHAPTER<br />

24<br />

<strong>Bootstrap</strong> Jumpotron<br />

This chapter will discuss one more feature <strong>Bootstrap</strong> supports, the Jumbotron. As the name suggest this<br />

component can optionally increases the size of headings and add a lot of margin for landing page content. To use<br />

the Jumbotron:<br />

<br />

<br />

simply create a container with the class of .jumbotron.<br />

In addition to a larger , the font-weight is reduced to 200px.<br />

The following example demonstrates this:<br />

<br />

<br />

Welcome to landing page!<br />

This is an example for jumbotron.<br />

<br />

Learn more<br />

<br />

<br />

<br />

To get a jumbotron full width, and without rounded corners use the .jumbotron class outside all.container classes<br />

and instead add a .container within as shown in the following example:<br />

TUTORIALS POINT<br />

Simply Easy Learning

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!