In this Bootstrap Jumbotron 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 .container within, 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>
Next Topic : Click Here