diff --git a/components.html b/components.html
index da32c5dd75..65cfb27397 100644
--- a/components.html
+++ b/components.html
@@ -2213,26 +2213,32 @@ body { padding-bottom: 70px; }
     <h2 id="alerts-links">Links in alerts</h2>
     <p>Use the <code>.alert-link</code> utility class to quickly provide matching colored links within any alert.</p>
     <div class="bs-example">
-      <div class="alert alert-danger">
-        <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
-      </div>
       <div class="alert alert-success">
         <strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>.
       </div>
       <div class="alert alert-info">
         <strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
       </div>
+      <div class="alert alert-warning">
+        <strong>Warning!</strong> Best check yo self, you're <a href="#" class="alert-link">not looking too good</a>.
+      </div>
+      <div class="alert alert-danger">
+        <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
+      </div>
     </div>
 {% highlight html %}
-<div class="alert alert-danger">
-  <a href="#" class="alert-link">...</a>
-</div>
 <div class="alert alert-success">
   <a href="#" class="alert-link">...</a>
 </div>
 <div class="alert alert-info">
   <a href="#" class="alert-link">...</a>
 </div>
+<div class="alert alert-warning">
+  <a href="#" class="alert-link">...</a>
+</div>
+<div class="alert alert-danger">
+  <a href="#" class="alert-link">...</a>
+</div>
 {% endhighlight %}
   </div>