diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 9477775f63..1e78aa66d7 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -1733,6 +1733,18 @@ input[type="button"].btn-block {
   border-color: #449d44;
 }
 
+.btn-info {
+  background-color: #5bc0de;
+  border-color: #5bc0de;
+}
+
+.btn-info:hover,
+.btn-info:focus,
+.btn-info:active {
+  background-color: #46b8da;
+  border-color: #31b0d5;
+}
+
 .btn-link,
 .btn-link:active,
 .btn-link[disabled],
diff --git a/docs/css.html b/docs/css.html
index 84e85c3718..427048aa04 100644
--- a/docs/css.html
+++ b/docs/css.html
@@ -1737,6 +1737,11 @@ For example, <code><section></code> should be wrapped
                 <td><code>btn btn-success</code></td>
                 <td>Indicates a successful or positive action</td>
               </tr>
+              <tr>
+                <td><button type="button" class="btn btn-info">Info</button></td>
+                <td><code>btn btn-info</code></td>
+                <td>Contextual button for informational alert messages</td>
+              </tr>
               <tr>
                 <td><button type="button" class="btn btn-warning">Warning</button></td>
                 <td><code>btn btn-warning</code></td>
diff --git a/docs/templates/pages/css.mustache b/docs/templates/pages/css.mustache
index 9aaf25c30e..4073d3d3dc 100644
--- a/docs/templates/pages/css.mustache
+++ b/docs/templates/pages/css.mustache
@@ -1676,6 +1676,11 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
                 <td><code>btn btn-success</code></td>
                 <td>Indicates a successful or positive action</td>
               </tr>
+              <tr>
+                <td><button type="button" class="btn btn-info">Info</button></td>
+                <td><code>btn btn-info</code></td>
+                <td>Contextual button for informational alert messages</td>
+              </tr>
               <tr>
                 <td><button type="button" class="btn btn-warning">Warning</button></td>
                 <td><code>btn btn-warning</code></td>
diff --git a/less/buttons.less b/less/buttons.less
index 6c1541a287..f825bd4295 100644
--- a/less/buttons.less
+++ b/less/buttons.less
@@ -168,6 +168,17 @@ input[type="button"] {
         border-color: darken(@btn-border-success, 10%);
   }
 }
+// Info appears as blue-green
+.btn-info {
+  background-color: @btn-background-info;
+      border-color: @btn-border-info;
+  &:hover,
+  &:focus,
+  &:active {
+    background-color: darken(@btn-background-info, 5%);
+        border-color: darken(@btn-border-info, 10%);
+  }
+}
 
 
 // Link buttons
diff --git a/less/variables.less b/less/variables.less
index b02d42fe19..538e2bd8b7 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -90,6 +90,10 @@
 @btn-background-danger:              #d9534f;
 @btn-border-danger:                  @btn-background-danger;
 
+@btn-background-info:                #5bc0de;
+@btn-border-info:                    @btn-background-info;
+
+
 
 // Forms
 // -------------------------