diff --git a/_includes/nav-components.html b/_includes/nav-components.html
index a1105cddae27fe2a61232f892a8f4c3f223bcb5a..8a40b1f35bde83baad3e1b0cdc7e7f0c4f921775 100644
--- a/_includes/nav-components.html
+++ b/_includes/nav-components.html
@@ -93,8 +93,7 @@
<li>
<a href="#alerts">Alerts</a>
<ul class="nav">
- <li><a href="#alerts-default">Default alert</a></li>
- <li><a href="#alerts-alternatives">Contextual alternatives</a></li>
+ <li><a href="#alerts-examples">Examples</a></li>
<li><a href="#alerts-dismissable">Dismissable alerts</a></li>
<li><a href="#alerts-links">Links in alerts</a></li>
</ul>
diff --git a/components.html b/components.html
index 7475fa1086a0412c6d8f7640aec8e7638b6821df..a78033772426f9f21c17a46697fcff2eea904375 100644
--- a/components.html
+++ b/components.html
@@ -2206,22 +2206,14 @@ body { padding-bottom: 70px; }
</div>
<p class="lead">Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. For inline dismissal, use the <a href="../javascript/#js-alerts">alerts jQuery plugin</a>.</p>
- <h2 id="alerts-default">Default alert</h2>
- <p>Wrap any text and an optional dismiss button in <code>.alert</code> for a basic warning alert message.</p>
+ <h2 id="alerts-examples">Examples</h2>
+ <p>Wrap any text and an optional dismiss button in <code>.alert</code> and one of the four contextual classes (e.g., <code>.alert-success</code>) for basic alert messages.</p>
- <div class="bs-example">
- <div class="alert">
- <strong>Warning!</strong> Best check yo self, you're not looking too good.
- </div>
+ <div class="bs-callout bs-callout-info">
+ <h4>No default class</h4>
+ <p>Alerts don't have default classes, only base and modifier classes. A default gray alert doesn't make too much sense, so you're required to specify a type via contextual class. Choose from success, info, warning, or danger.</p>
</div>
-{% highlight html %}
-<div class="alert">
- <strong>Warning!</strong> Best check yo self, you're not looking too good.
-</div>
-{% endhighlight %}
- <h2 id="alerts-alternatives">Contextual alternatives</h2>
- <p>Add optional classes to change an alert's connotation.</p>
<div class="bs-example">
<div class="alert alert-success">
<strong>Well done!</strong> You successfully read this important alert message.
@@ -2229,6 +2221,9 @@ body { padding-bottom: 70px; }
<div class="alert alert-info">
<strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div>
+ <div class="alert alert-warning">
+ <strong>Warning!</strong> Best check yo self, you're not looking too good.
+ </div>
<div class="alert alert-danger">
<strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>
@@ -2236,6 +2231,7 @@ body { padding-bottom: 70px; }
{% highlight html %}
<div class="alert alert-success">...</div>
<div class="alert alert-info">...</div>
+<div class="alert alert-warning">...</div>
<div class="alert alert-danger">...</div>
{% endhighlight %}
diff --git a/javascript.html b/javascript.html
index 9e85c77420b32a6e74348acfd3314fac1dc81842..40c04f58bbed69bbc2e6948d5c2547caad0455c7 100644
--- a/javascript.html
+++ b/javascript.html
@@ -1184,7 +1184,7 @@ $('#myPopover').on('hidden.bs.popover', function () {
<h2 id="alerts-examples">Example alerts</h2>
<p>Add dismiss functionality to all alert messages with this plugin.</p>
<div class="bs-example">
- <div class="alert fade in">
+ <div class="alert alert-warning fade in">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
</div>
diff --git a/less/alerts.less b/less/alerts.less
index 3ba463dba0e531d9c82054a9e31fb9a8228c139e..be09d18d0ac6fb38337c392291a046e827d6a67e 100644
--- a/less/alerts.less
+++ b/less/alerts.less
@@ -9,9 +9,7 @@
.alert {
padding: @alert-padding;
margin-bottom: @line-height-computed;
- color: @alert-text;
- background-color: @alert-bg;
- border: 1px solid @alert-border;
+ border: 1px solid transparent;
border-radius: @alert-border-radius;
// Headings for larger alerts
@@ -20,14 +18,9 @@
// Specified for the h4 to prevent conflicts of changing @headingsColor
color: inherit;
}
- // Match the hr to the border of the alert
- hr {
- border-top-color: darken(@alert-border, 5%);
- }
// Provide class for links that match alerts
.alert-link {
font-weight: @alert-link-font-weight;
- color: darken(@alert-text, 10%);
}
// Improve alignment and spacing of inner content
@@ -63,9 +56,12 @@
.alert-success {
.alert-variant(@alert-success-bg; @alert-success-border; @alert-success-text);
}
-.alert-danger {
- .alert-variant(@alert-danger-bg; @alert-danger-border; @alert-danger-text);
-}
.alert-info {
.alert-variant(@alert-info-bg; @alert-info-border; @alert-info-text);
}
+.alert-warning {
+ .alert-variant(@alert-warning-bg; @alert-warning-border; @alert-warning-text);
+}
+.alert-danger {
+ .alert-variant(@alert-danger-bg; @alert-danger-border; @alert-danger-text);
+}
diff --git a/less/variables.less b/less/variables.less
index 53aad251bedf650b426d873d7da916de2244f6fb..f2274b7f1ed20fbb2b3e1a36dcb38f7a904c1f59 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -439,22 +439,22 @@
@alert-border-radius: @border-radius-base;
@alert-link-font-weight: bold;
-@alert-bg: @state-warning-bg;
-@alert-text: @state-warning-text;
-@alert-border: @state-warning-border;
-
@alert-success-bg: @state-success-bg;
@alert-success-text: @state-success-text;
@alert-success-border: @state-success-border;
-@alert-danger-bg: @state-danger-bg;
-@alert-danger-text: @state-danger-text;
-@alert-danger-border: @state-danger-border;
-
@alert-info-bg: @state-info-bg;
@alert-info-text: @state-info-text;
@alert-info-border: @state-info-border;
+@alert-warning-bg: @state-warning-bg;
+@alert-warning-text: @state-warning-text;
+@alert-warning-border: @state-warning-border;
+
+@alert-danger-bg: @state-danger-bg;
+@alert-danger-text: @state-danger-text;
+@alert-danger-border: @state-danger-border;
+
// Progress bars
// -------------------------