introduce display heading classes

dist/css/bootstrap-flex.css

@@ -560,6 +560,26 @@ h6, .h6 {
   font-weight: 300;
 }
 
+.display-1 {
+  font-size: 3.5rem;
+  font-weight: 300;
+}
+
+.display-2 {
+  font-size: 4.5rem;
+  font-weight: 300;
+}
+
+.display-3 {
+  font-size: 5.5rem;
+  font-weight: 300;
+}
+
+.display-4 {
+  font-size: 6rem;
+  font-weight: 300;
+}
+
 hr {
   margin-top: 1rem;
   margin-bottom: 1rem;

dist/css/bootstrap.css

@@ -560,6 +560,26 @@ h6, .h6 {
   font-weight: 300;
 }
 
+.display-1 {
+  font-size: 3.5rem;
+  font-weight: 300;
+}
+
+.display-2 {
+  font-size: 4.5rem;
+  font-weight: 300;
+}
+
+.display-3 {
+  font-size: 5.5rem;
+  font-weight: 300;
+}
+
+.display-4 {
+  font-size: 6rem;
+  font-weight: 300;
+}
+
 hr {
   margin-top: 1rem;
   margin-bottom: 1rem;

docs/components/typography.md

@@ -102,6 +102,30 @@ Create lighter, secondary text in any heading with a generic `<small>` tag or th
 <h6>h6. Bootstrap heading <small>Secondary text</small></h6>
 {% endhighlight %}
 
+## Display headings
+
+Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a **display heading**—a larger, slightly more opinionated heading style.
+
+<div class="bd-example bd-example-type">
+  <table class="table">
+    <tbody>
+      <tr>
+        <td><h1 class="display-4">Display 4</h1></td>
+      </tr>
+      <tr>
+      <td><h1 class="display-3">Display 3</h1></td>
+      </tr>
+      <tr>
+      <td><h1 class="display-2">Display 2</h1></td>
+      </tr>
+      <tr>
+      <td><h1 class="display-1">Display 1</h1></td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+
 ## Lead
 
 Make a paragraph stand out by adding `.lead`.

docs/dist/css/bootstrap-flex.css

@@ -560,6 +560,26 @@ h6, .h6 {
   font-weight: 300;
 }
 
+.display-1 {
+  font-size: 3.5rem;
+  font-weight: 300;
+}
+
+.display-2 {
+  font-size: 4.5rem;
+  font-weight: 300;
+}
+
+.display-3 {
+  font-size: 5.5rem;
+  font-weight: 300;
+}
+
+.display-4 {
+  font-size: 6rem;
+  font-weight: 300;
+}
+
 hr {
   margin-top: 1rem;
   margin-bottom: 1rem;

docs/dist/css/bootstrap.css

@@ -560,6 +560,26 @@ h6, .h6 {
   font-weight: 300;
 }
 
+.display-1 {
+  font-size: 3.5rem;
+  font-weight: 300;
+}
+
+.display-2 {
+  font-size: 4.5rem;
+  font-weight: 300;
+}
+
+.display-3 {
+  font-size: 5.5rem;
+  font-weight: 300;
+}
+
+.display-4 {
+  font-size: 6rem;
+  font-weight: 300;
+}
+
 hr {
   margin-top: 1rem;
   margin-bottom: 1rem;

scss/_type.scss

@@ -55,6 +55,24 @@ h6, .h6 { font-size: $font-size-h6; }
   font-weight: 300;
 }
 
+// Type display classes
+.display-1 {
+  font-size: $display1-size;
+  font-weight: $display1-weight;
+}
+.display-2 {
+  font-size: $display2-size;
+  font-weight: $display2-weight;
+}
+.display-3 {
+  font-size: $display3-size;
+  font-weight: $display3-weight;
+}
+.display-4 {
+  font-size: $display4-size;
+  font-weight: $display4-weight;
+}
+
 
 //
 // Horizontal rules

scss/_variables.scss

@@ -78,6 +78,16 @@ $font-size-h4:               1.5rem !default;
 $font-size-h5:               1.25rem !default;
 $font-size-h6:               1rem !default;
 
+$display1-size:               3.5rem !default;
+$display2-size:               4.5rem !default;
+$display3-size:               5.5rem !default;
+$display4-size:               6rem !default;
+
+$display1-weight:             300 !default;
+$display2-weight:             300 !default;
+$display3-weight:             300 !default;
+$display4-weight:             300 !default;
+
 $line-height:                1.5 !default;
 
 $headings-font-family:       inherit !default;