rewrite jumbotron less and make heading use a class

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

docs/dist/css/bootstrap.css

@@ -4172,13 +4172,6 @@ a.list-group-item.active > .badge,
   color: inherit;
   background-color: #eceeef;
 }
-.jumbotron h1,
-.jumbotron .h1 {
-  color: inherit;
-}
-.jumbotron > hr {
-  border-top-color: #d0d5d8;
-}
 .container .jumbotron,
 .container-fluid .jumbotron {
   border-radius: .3rem;
@@ -4186,16 +4179,22 @@ a.list-group-item.active > .badge,
 .jumbotron .container {
   max-width: 100%;
 }
-@media screen and (min-width: 48em) {
+.jumbotron-heading {
+  color: inherit;
+}
+.jumbotron-hr {
+  border-top-color: #d0d5d8;
+}
+@media (min-width: 48em) {
   .jumbotron {
     padding: 3.2rem 0;
   }
-  .container .jumbotron {
+  .container .jumbotron,
+  .container-fluid .jumbotron {
     padding-right: 4rem;
     padding-left: 4rem;
   }
-  .jumbotron h1,
-  .jumbotron .h1 {
+  .jumbotron-heading {
     font-size: 4.5rem;
   }
 }