rewrite jumbotron less and make heading use a class

1 files changed, 16 insertions, 15 deletions

diff --git a/less/_jumbotron.less b/less/_jumbotron.less
index 7328570ae..840de2659 100644
--- a/less/_jumbotron.less
+++ b/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);
   }
 }