Change up link alerts

* No more children selectors to set all links in alerts as a special color because buttons and more wrongly inherited color
* Adds .alert-link for easy styling in any alert

1 files changed, 28 insertions, 0 deletions

diff --git a/docs/components.html b/docs/components.html
index ea87a7e22..20fdd70dd 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -1906,6 +1906,34 @@ body { padding-bottom: 70px; }
 <div class="alert alert-success">...</div>
 <div class="alert alert-info">...</div>
 {% endhighlight %}
+
+    <h3 id="alerts-links">Links in alerts</h3>
+    <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">
+        <button type="button" class="close" data-dismiss="alert">&times;</button>
+        <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">
+        <button type="button" class="close" data-dismiss="alert">&times;</button>
+        <strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>.
+      </div>
+      <div class="alert alert-info">
+        <button type="button" class="close" data-dismiss="alert">&times;</button>
+        <strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
+      </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>
+{% endhighlight %}
   </div>