| 1 |
efrain |
1 |
---
|
|
|
2 |
layout: docs
|
|
|
3 |
title: Jumbotron
|
|
|
4 |
description: Lightweight, flexible component for showcasing hero unit style content.
|
|
|
5 |
group: components
|
|
|
6 |
---
|
|
|
7 |
|
|
|
8 |
A lightweight, flexible component that can optionally extend the entire viewport to showcase key marketing messages on your site.
|
|
|
9 |
|
|
|
10 |
{{< example >}}
|
|
|
11 |
<div class="jumbotron">
|
|
|
12 |
<h1 class="display-4">Hello, world!</h1>
|
|
|
13 |
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
|
|
|
14 |
<hr class="my-4">
|
|
|
15 |
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
|
|
|
16 |
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
|
|
|
17 |
</div>
|
|
|
18 |
{{< /example >}}
|
|
|
19 |
|
|
|
20 |
To make the jumbotron full width, and without rounded corners, add the `.jumbotron-fluid` modifier class and add a `.container` or `.container-fluid` within.
|
|
|
21 |
|
|
|
22 |
{{< example >}}
|
|
|
23 |
<div class="jumbotron jumbotron-fluid">
|
|
|
24 |
<div class="container">
|
|
|
25 |
<h1 class="display-4">Fluid jumbotron</h1>
|
|
|
26 |
<p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
|
|
|
27 |
</div>
|
|
|
28 |
</div>
|
|
|
29 |
{{< /example >}}
|