Bootstrap Jumbotron
This chapter will explain another feature supported by Bootstrap, the Jumbotron. As the name suggests, this component can increase the size of headings and add more margin to landing page content. The steps to use the Jumbotron are as follows:
- Create a container with class.jumbotron. container <div>.
- In addition to the larger <h1>, the font weightfont-weightis 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>
Try it »
The result is as follows:
To get a full-width Jumbotron without rounded corners, use the.containerclass outside all.jumbotronclass, as shown in the example below:
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>
Try it »
The result is as follows:
