Bootstrap Jumbotron
In this tutorial you will learn how to use Bootstrap jumbotron component.
Showcasing Contents with Jumbotron
The Bootstrap jumbotron component provides an excellent way to showcase the key content or information on a web page. Just wrap your featured content like heading, descriptions etc. in a <div>
element and apply the class .jumbotron
on it.
<div class="jumbotron">
<h1>Learn to Create Websites</h1>
<p>In today's world internet is the most popular way…</p>
<p><a href="#" class="btn btn-primary btn-lg">Learn more</a></p>
</div>
— 上面示例的输出将如下所示:
Creating Full Page Width Jumbotron
To create a jumbotron without rounded corners and that covers the full width of the viewport, place it outside all the containers and add the .container
within like this.
<div class="jumbotron">
<div class="container">
<h1>Learn to Create Websites</h1>
<p>In today's world internet is the most popular way…</p>
<p><a href="#" class="btn btn-primary btn-lg">Learn more</a></p>
</div>
</div>
Advertisements