Bootstrap - Jumbotron
This chapter will discuss one more feature that Bootstrap supports, the Jumbotron. As the name suggest this component can optionally increase the size of headings and add a lot of margin for landing page content. To use the Jumbotron −
· Create a container <div> with the class of .jumbotron.
· In addition to a larger <h1>, the font-weight is reduced to 200px.
The following example demonstrates this −
<div class = "container">
<div class = "jumbotron">
<h1>Welcome to landing page!</h1>
<p>This is an example for jumbotron.</p>
<p>
<a class = "btn btn-primary btn-lg" role = "button">Learn more</a>
</p>
</div>
</div>
To get a jumbotron of full width, and without rounded corners use the.jumbotron class outside all .container classes and instead add a .containerwithin, as shown in the following example −
<div class = "jumbotron">
<div class = "container">
<h1>Welcome to landing page!</h1>
<p>This is an example for jumbotron.</p>
<p>
<a class = "btn btn-primary btn-lg" role = "button">Learn more</a>
</p>
</div>
</div>