rewrite jumbotron less and make heading use a class

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 %}