diff --git a/docs/javascript/alerts.md b/docs/javascript/alerts.md
index bbe2eeab42..8d3df5d2f8 100644
--- a/docs/javascript/alerts.md
+++ b/docs/javascript/alerts.md
@@ -22,7 +22,7 @@ When using a `.close` button, it must be the first child of the `.alert-dismissi
 {% example html %}
 <div class="alert alert-danger alert-dismissible fade in" role="alert">
   <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
-  <h4>Oh snap! You got an error!</h4>
+  <h4 class="alert-heading">Oh snap! You got an error!</h4>
   <p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
   <p>
     <button type="button" class="btn btn-danger">Take this action</button>
diff --git a/scss/_alert.scss b/scss/_alert.scss
index 685ca314b1..8ec7d06628 100644
--- a/scss/_alert.scss
+++ b/scss/_alert.scss
@@ -12,17 +12,6 @@
   border: 1px solid transparent;
   @include border-radius($alert-border-radius);
 
-  // Headings for larger alerts
-  h4 {
-    margin-top: 0;
-    // Specified for the h4 to prevent conflicts of changing $headings-color
-    color: inherit;
-  }
-  // Provide class for links that match alerts
-  .alert-link {
-    font-weight: $alert-link-font-weight;
-  }
-
   // Improve alignment and spacing of inner content
   > p,
   > ul {
@@ -33,6 +22,18 @@
   }
 }
 
+// Headings for larger alerts
+.alert-heading {
+  margin-top: 0;
+  // Specified to prevent conflicts of changing $headings-color
+  color: inherit;
+}
+
+// Provide class for links that match alerts
+.alert-link {
+  font-weight: $alert-link-font-weight;
+}
+
 // Dismissible alerts
 //
 // Expand the right padding and account for the close button's positioning.