Fixes #11268: Account for badges within buttons by matching background to text color and text color to background

components.html

@@ -2697,6 +2697,10 @@ body { padding-bottom: 70px; }
           </a>
         </li>
       </ul>
+      <br>
+      <button class="btn btn-primary" type="button">
+        Messages <span class="badge">4</span>
+      </button>
     </div>
 {% highlight html %}
 <ul class="nav nav-pills nav-stacked">

dist/css/bootstrap.css

@@ -2335,6 +2335,11 @@ fieldset[disabled] .btn-default.active {
   border-color: #cccccc;
 }
 
+.btn-default .badge {
+  color: #ffffff;
+  background-color: #fff;
+}
+
 .btn-primary {
   color: #ffffff;
   background-color: #428bca;
@@ -2376,6 +2381,11 @@ fieldset[disabled] .btn-primary.active {
   border-color: #357ebd;
 }
 
+.btn-primary .badge {
+  color: #428bca;
+  background-color: #fff;
+}
+
 .btn-warning {
   color: #ffffff;
   background-color: #f0ad4e;
@@ -2417,6 +2427,11 @@ fieldset[disabled] .btn-warning.active {
   border-color: #eea236;
 }
 
+.btn-warning .badge {
+  color: #f0ad4e;
+  background-color: #fff;
+}
+
 .btn-danger {
   color: #ffffff;
   background-color: #d9534f;
@@ -2458,6 +2473,11 @@ fieldset[disabled] .btn-danger.active {
   border-color: #d43f3a;
 }
 
+.btn-danger .badge {
+  color: #d9534f;
+  background-color: #fff;
+}
+
 .btn-success {
   color: #ffffff;
   background-color: #5cb85c;
@@ -2499,6 +2519,11 @@ fieldset[disabled] .btn-success.active {
   border-color: #4cae4c;
 }
 
+.btn-success .badge {
+  color: #5cb85c;
+  background-color: #fff;
+}
+
 .btn-info {
   color: #ffffff;
   background-color: #5bc0de;
@@ -2540,6 +2565,11 @@ fieldset[disabled] .btn-info.active {
   border-color: #46b8da;
 }
 
+.btn-info .badge {
+  color: #5bc0de;
+  background-color: #fff;
+}
+
 .btn-link {
   font-weight: normal;
   color: #428bca;

less/mixins.less

@@ -489,6 +489,11 @@
           border-color: @border;
     }
   }
+
+  .badge {
+    color: @background;
+    background-color: #fff;
+  }
 }
 
 // Button sizes