|
| 1 | +--- |
| 2 | +layout: docs |
| 3 | +title: Bootstrap jumbotron |
| 4 | +description: Bootstrap jumbotron component indicates a big grey box for showcasing hero unit style content. |
| 5 | +group: components |
| 6 | +toc: true |
| 7 | +--- |
| 8 | + |
| 9 | +## Basic example |
| 10 | + |
| 11 | +The jumbotron component is dropped in version v4 as it can be replicated with utilities. Please check examples of how to create a lightweight, flexible element that can optionally reach the entire viewport to showcase essential marketing information on your site. |
| 12 | + |
| 13 | +{{< example >}} |
| 14 | +<div class="p-5 mb-4 bg-body-tertiary rounded-3"> |
| 15 | + <h1 class="display-4">Hello, world!</h1> |
| 16 | + <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p> |
| 17 | + <hr class="my-4"> |
| 18 | + <p>It uses utility classes for typography and spacing to space content out within the larger container.</p> |
| 19 | + <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a> |
| 20 | +</div> |
| 21 | +{{< /example >}} |
| 22 | + |
| 23 | + |
| 24 | +## Full-width Bootstrap jumbotron |
| 25 | + |
| 26 | +{{< example >}} |
| 27 | +<div class="p-5 text-center bg-body-tertiary"> |
| 28 | + <div class="container py-5"> |
| 29 | + <h1 class="text-body-emphasis">Full-width jumbotron</h1> |
| 30 | + <p class="col-lg-8 mx-auto lead"> |
| 31 | + This takes the basic jumbotron above and makes its background edge-to-edge with a <code>.container</code> inside to align content. Similar to above, it's been recreated with built-in grid and utility classes. |
| 32 | + </p> |
| 33 | + </div> |
| 34 | +</div> |
| 35 | +{{< /example >}} |
| 36 | + |
| 37 | +## Custom Bootstrap jumbotrons |
| 38 | + |
| 39 | +{{< example >}} |
| 40 | +<div class="row align-items-md-stretch"> |
| 41 | + <div class="col-md-6"> |
| 42 | + <div class="h-100 p-5 text-bg-dark rounded-3"> |
| 43 | + <h2>Change the background</h2> |
| 44 | + <p>Swap the background-color utility and add a <code>.text-*</code> color utility to mix up the jumbotron look. Then, mix and match with additional component themes and more.</p> |
| 45 | + <button class="btn btn-outline-light" type="button">Example button</button> |
| 46 | + </div> |
| 47 | + </div> |
| 48 | + <div class="col-md-6"> |
| 49 | + <div class="h-100 p-5 bg-body-tertiary border rounded-3"> |
| 50 | + <h2>Add borders</h2> |
| 51 | + <p>Or, keep it light and add a border for some added definition to the boundaries of your content. Be sure to look under the hood at the source HTML here as we've adjusted the alignment and sizing of both column's content for equal-height.</p> |
| 52 | + <button class="btn btn-outline-secondary" type="button">Example button</button> |
| 53 | + </div> |
| 54 | + </div> |
| 55 | +</div> |
| 56 | +{{< /example >}} |
0 commit comments