Bootstrap Jumbotron
This chapter will explain another feature supported by Bootstrap, the Jumbotron. As the name suggests, this component increases the size of the heading and adds more margin to the content of the landing page. The steps to use the Jumbotron are as follows:
Create a container <div> with the class .jumbotron.
In addition to a larger <h1>, the font weight is reduced to 200.
The following example demonstrates this:
Example
<div class="container">
<div class="jumbotron">
<h1>Welcome to the Landing Page!</h1>
<p>This is an example of a Jumbotron.</p>
<p><a class="btn btn-primary btn-lg" role="button">
Learn more</a>
</p>
</div>
</div>
The result is as shown below:
To get a full-width Jumbotron without rounded corners, use the .jumbotron class outside of all .container classes, as shown in the following example:
Example
<div class="jumbotron">
<div class="container">
<h1>Welcome to the Landing Page!</h1>
<p>This is an example of a Jumbotron.</p>
<p><a class="btn btn-primary btn-lg" role="button">
Learn more</a>
</p>
</div>
</div>
The result is as shown below: