diff options
Diffstat (limited to 'docs/components')
| -rw-r--r-- | docs/components/jumbotron.md | 19 |
1 files changed, 15 insertions, 4 deletions
diff --git a/docs/components/jumbotron.md b/docs/components/jumbotron.md index d211f1a52..080133ed5 100644 --- a/docs/components/jumbotron.md +++ b/docs/components/jumbotron.md @@ -7,18 +7,29 @@ A lightweight, flexible component that can optionally extend the entire viewport {% example html %} <div class="jumbotron"> - <h1>Hello, world!</h1> - <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p> - <p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p> + <h1 class="jumbotron-heading">Hello, world!</h1> + <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p> + <p class="lead"><a class="btn btn-primary btn-lg" role="button">Learn more</a></p> </div> {% endexample %} To make the jumbotron full width, and without rounded corners, place it outside all `.container`s and instead add a `.container` within. -{% example html %} +{% highlight html %} <div class="jumbotron"> <div class="container"> ... </div> </div> +{% endhighlight %} + +Jumbotrons also come with an adaptive `hr`—just add `.jumbotron-hr` to the element and the `border-top-color` will be tinted based on the jumbotron background. + +{% example html %} +<div class="jumbotron"> + <h1 class="jumbotron-heading">Jumbotron <code>hr</code></h1> + <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p> + <hr class="jumbotron-hr"> + <p class="lead"><a class="btn btn-primary btn-lg" role="button">Learn more</a></p> +</div> {% endexample %} |