| commit | author | age | ||
| 83c3f6 | 1 | --- |
| SP | 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 | {% capture 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 | {% endcapture %} | |
| 19 | {% include example.html content=example %} | |
| 20 | ||
| 21 | To make the jumbotron full width, and without rounded corners, add the `.jumbotron-fluid` modifier class and add a `.container` or `.container-fluid` within. | |
| 22 | ||
| 23 | {% capture example %} | |
| 24 | <div class="jumbotron jumbotron-fluid"> | |
| 25 | <div class="container"> | |
| 26 | <h1 class="display-4">Fluid jumbotron</h1> | |
| 27 | <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p> | |
| 28 | </div> | |
| 29 | </div> | |
| 30 | {% endcapture %} | |
| 31 | {% include example.html content=example %} | |
