rewrite jumbotron less and make heading use a class

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

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

less/_jumbotron.less

@@ -9,15 +9,6 @@
   color: @jumbotron-color;
   background-color: @jumbotron-bg;
 
-  h1,
-  .h1 {
-    color: @jumbotron-heading-color;
-  }
-
-  > hr {
-    border-top-color: darken(@jumbotron-bg, 10%);
-  }
-
   .container &,
   .container-fluid & {
     .border-radius(@border-radius-large); // Only round corners at higher resolutions if contained in a container
@@ -26,18 +17,28 @@
   .container {
     max-width: 100%;
   }
+}
 
-  @media screen and (min-width: @screen-sm-min) {
+.jumbotron-heading {
+  color: @jumbotron-heading-color;
+}
+
+.jumbotron-hr {
+  border-top-color: darken(@jumbotron-bg, 10%);
+}
+
+@media (min-width: @screen-sm-min) {
+  .jumbotron {
     padding: (@jumbotron-padding * 1.6) 0;
 
-    .container & {
+    .container &,
+    .container-fluid & {
       padding-left:  (@jumbotron-padding * 2);
       padding-right: (@jumbotron-padding * 2);
     }
+  }
 
-    h1,
-    .h1 {
-      font-size: (@font-size-base * 4.5);
-    }
+  .jumbotron-heading {
+    font-size: (@font-size-base * 4.5);
   }
 }