Bootstrap Jumbotron

Jumbotron

A jumbotron is a big box which might include especial content or information for extra attention. It is displayed in grey colored box with rounded corners.

Code Structure:
<div class="container">
    <div class="jumbotron">
        <h1>Bootstrap Jumbotron</h1>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
    </div>
</div>

Jumbotron with Page Header

.page-header class adds a horizontal line under the heading.

Code Structure:
<div class="container">
    <div class="page-header">
        <h1>Page Header</h1>
    </div>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</div>

Share this

Related Posts