]>
Commit | Line | Data |
---|---|---|
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 | ||
12 | {% example html %} | |
13 | <div class="jumbotron"> | |
14 | <h1 class="display-3">Hello, world!</h1> | |
15 | <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p> | |
16 | <hr class="my-4"> | |
17 | <p>It uses utility classes for typography and spacing to space content out within the larger container.</p> | |
18 | <p class="lead"> | |
19 | <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a> | |
20 | </p> | |
21 | </div> | |
22 | {% endexample %} | |
23 | ||
24 | To make the jumbotron full width, and without rounded corners, add the `.jumbotron-fluid` modifier class and add a `.container` or `.container-fluid` within. | |
25 | ||
26 | {% example html %} | |
27 | <div class="jumbotron jumbotron-fluid"> | |
28 | <div class="container"> | |
29 | <h1 class="display-3">Fluid jumbotron</h1> | |
30 | <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p> | |
31 | </div> | |
32 | </div> | |
33 | {% endexample %} |