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

4 files changed, 34 insertions, 9 deletions

diff --git a/docs/_includes/nav-components.html b/docs/_includes/nav-components.html
index 8c7728bc8f..4f49d68b26 100644
--- a/docs/_includes/nav-components.html
+++ b/docs/_includes/nav-components.html
@@ -84,6 +84,7 @@
     <li><a href="#alerts-default">Default alert</a></li>
     <li><a href="#alerts-block">Block alerts</a></li>
     <li><a href="#alerts-alternatives">Contextual alternatives</a></li>
+    <li><a href="#alerts-links">Links in alerts</a></li>
   </ul>
 </li>
 <li>
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 4542376d8b..04b72bd431 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -4410,8 +4410,7 @@ button.close {
   border-top-color: #f8e5be;
 }
 
-.alert > a,
-.alert > p > a {
+.alert .alert-link {
   font-weight: 500;
   color: #a47e3c;
 }
@@ -4433,8 +4432,7 @@ button.close {
   border-top-color: #c9e2b3;
 }
 
-.alert-success > a,
-.alert-success > p > a {
+.alert-success .alert-link {
   color: #356635;
 }
 
@@ -4448,8 +4446,7 @@ button.close {
   border-top-color: #e6c1c7;
 }
 
-.alert-danger > a,
-.alert-danger > p > a {
+.alert-danger .alert-link {
   color: #953b39;
 }
 
@@ -4463,8 +4460,7 @@ button.close {
   border-top-color: #a6e1ec;
 }
 
-.alert-info > a,
-.alert-info > p > a {
+.alert-info .alert-link {
   color: #2d6987;
 }
 
diff --git a/docs/components.html b/docs/components.html
index ea87a7e22d..20fdd70ddc 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>
 
 
diff --git a/docs/javascript.html b/docs/javascript.html
index 25ea6a9532..160c897efe 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -1053,7 +1053,7 @@ $('#example').tooltip(options)
             <h4>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>
-              <a class="btn btn-danger" href="#">Take this action</a> <a class="btn" href="#">Or do this</a>
+              <a class="btn btn-danger" href="#">Take this action</a> <a class="btn btn-default" href="#">Or do this</a>
             </p>
           </div>
         </div><!-- /example -->