Fixes #9617: consistent variation order, add .label-primary

components.html

@@ -326,7 +326,7 @@ base_url: "../"
     <div class="bs-example">
       <div class="btn-toolbar" style="margin-bottom: 10px;">
         <div class="btn-group">
-          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
+          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Default <span class="caret"></span></button>
           <ul class="dropdown-menu">
             <li><a href="#">Action</a></li>
             <li><a href="#">Another action</a></li>
@@ -336,7 +336,7 @@ base_url: "../"
           </ul>
         </div><!-- /btn-group -->
         <div class="btn-group">
-          <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
+          <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Primary <span class="caret"></span></button>
           <ul class="dropdown-menu">
             <li><a href="#">Action</a></li>
             <li><a href="#">Another action</a></li>
@@ -346,7 +346,17 @@ base_url: "../"
           </ul>
         </div><!-- /btn-group -->
         <div class="btn-group">
-          <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">Danger <span class="caret"></span></button>
+          <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">Success <span class="caret"></span></button>
+          <ul class="dropdown-menu">
+            <li><a href="#">Action</a></li>
+            <li><a href="#">Another action</a></li>
+            <li><a href="#">Something else here</a></li>
+            <li class="divider"></li>
+            <li><a href="#">Separated link</a></li>
+          </ul>
+        </div><!-- /btn-group -->
+        <div class="btn-group">
+          <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">Info <span class="caret"></span></button>
           <ul class="dropdown-menu">
             <li><a href="#">Action</a></li>
             <li><a href="#">Another action</a></li>
@@ -366,7 +376,7 @@ base_url: "../"
           </ul>
         </div><!-- /btn-group -->
         <div class="btn-group">
-          <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">Success <span class="caret"></span></button>
+          <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">Danger <span class="caret"></span></button>
           <ul class="dropdown-menu">
             <li><a href="#">Action</a></li>
             <li><a href="#">Another action</a></li>
@@ -398,7 +408,7 @@ base_url: "../"
     <div class="bs-example">
       <div class="btn-toolbar" style="margin: 0;">
         <div class="btn-group">
-          <button type="button" class="btn btn-default">Action</button>
+          <button type="button" class="btn btn-default">Default</button>
           <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
           <ul class="dropdown-menu">
             <li><a href="#">Action</a></li>
@@ -409,7 +419,7 @@ base_url: "../"
           </ul>
         </div><!-- /btn-group -->
         <div class="btn-group">
-          <button type="button" class="btn btn-primary">Action</button>
+          <button type="button" class="btn btn-primary">Primary</button>
           <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
           <ul class="dropdown-menu">
             <li><a href="#">Action</a></li>
@@ -420,8 +430,19 @@ base_url: "../"
           </ul>
         </div><!-- /btn-group -->
         <div class="btn-group">
-          <button type="button" class="btn btn-danger">Danger</button>
+          <button type="button" class="btn btn-success">Success</button>
-          <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
+          <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
+          <ul class="dropdown-menu">
+            <li><a href="#">Action</a></li>
+            <li><a href="#">Another action</a></li>
+            <li><a href="#">Something else here</a></li>
+            <li class="divider"></li>
+            <li><a href="#">Separated link</a></li>
+          </ul>
+        </div><!-- /btn-group -->
+        <div class="btn-group">
+          <button type="button" class="btn btn-info">Info</button>
+          <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
           <ul class="dropdown-menu">
             <li><a href="#">Action</a></li>
             <li><a href="#">Another action</a></li>
@@ -442,8 +463,8 @@ base_url: "../"
           </ul>
         </div><!-- /btn-group -->
         <div class="btn-group">
-          <button type="button" class="btn btn-success">Success</button>
+          <button type="button" class="btn btn-danger">Danger</button>
-          <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
+          <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
           <ul class="dropdown-menu">
             <li><a href="#">Action</a></li>
             <li><a href="#">Another action</a></li>
@@ -457,8 +478,8 @@ base_url: "../"
 {% highlight html %}
 <!-- Split button -->
 <div class="btn-group">
-  <button type="button" class="btn btn-default">Action</button>
+  <button type="button" class="btn btn-danger">Action</button>
-  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
     <span class="caret"></span>
   </button>
   <ul class="dropdown-menu">
@@ -1658,17 +1679,19 @@ body { padding-bottom: 70px; }
     <p>Add any of the below mentioned modifier classes to change the appearance of a label.</p>
     <div class="bs-example">
       <span class="label label-default">Default</span>
+      <span class="label label-primary">Primary</span>
       <span class="label label-success">Success</span>
+      <span class="label label-info">Info</span>
       <span class="label label-warning">Warning</span>
       <span class="label label-danger">Danger</span>
-      <span class="label label-info">Info</span>
     </div>
 {% highlight html %}
 <span class="label label-default">Default</span>
+<span class="label label-primary">Primary</span>
 <span class="label label-success">Success</span>
+<span class="label label-info">Info</span>
 <span class="label label-warning">Warning</span>
 <span class="label label-danger">Danger</span>
-<span class="label label-info">Info</span>
 {% endhighlight %}
 
   </div>
@@ -2443,6 +2466,14 @@ body { padding-bottom: 70px; }
           Panel content
         </div>
       </div>
+      <div class="panel panel-info">
+        <div class="panel-heading">
+          <h3 class="panel-title">Panel title</h3>
+        </div>
+        <div class="panel-body">
+          Panel content
+        </div>
+      </div>
       <div class="panel panel-warning">
         <div class="panel-heading">
           <h3 class="panel-title">Panel title</h3>
@@ -2459,21 +2490,13 @@ body { padding-bottom: 70px; }
           Panel content
         </div>
       </div>
-      <div class="panel panel-info">
-        <div class="panel-heading">
-          <h3 class="panel-title">Panel title</h3>
-        </div>
-        <div class="panel-body">
-          Panel content
-        </div>
-      </div>
     </div>
 {% highlight html %}
 <div class="panel panel-primary">...</div>
 <div class="panel panel-success">...</div>
+<div class="panel panel-info">...</div>
 <div class="panel panel-warning">...</div>
 <div class="panel panel-danger">...</div>
-<div class="panel panel-info">...</div>
 {% endhighlight %}
 
     <h3 id="panels-list-group">With list groups</h3>

css.html

@@ -721,18 +721,18 @@ base_url: "../"
     <div class="bs-example">
       <p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
       <p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
-      <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
-      <p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
       <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
       <p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+      <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
+      <p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
     </div>
 {% highlight html %}
 <p class="text-muted">...</p>
 <p class="text-primary">...</p>
-<p class="text-warning">...</p>
-<p class="text-danger">...</p>
 <p class="text-success">...</p>
 <p class="text-info">...</p>
+<p class="text-warning">...</p>
+<p class="text-danger">...</p>
 {% endhighlight %}
 
 

customize.html

@@ -1302,14 +1302,20 @@ base_url: "../"
     <h2 id="variables-labels">Labels</h2>
     <div class="row">
       <div class="col-lg-6">
+        <label>@label-default-bg</label>
+        <input type="text" class="form-control" placeholder="@gray-light">
+        <p class="help-block">Default label background color</p>
+        <label>@label-primary-bg</label>
+        <input type="text" class="form-control" placeholder="@brand-primary">
+        <p class="help-block">Primary label background color</p>
         <label>@label-success-bg</label>
         <input type="text" class="form-control" placeholder="@brand-success">
         <p class="help-block">Success label background color</p>
+      </div>
+      <div class="col-lg-6">
         <label>@label-info-bg</label>
         <input type="text" class="form-control" placeholder="@brand-info">
         <p class="help-block">Info label background color</p>
-      </div>
-      <div class="col-lg-6">
         <label>@label-warning-bg</label>
         <input type="text" class="form-control" placeholder="@brand-warning">
         <p class="help-block">Warning label background color</p>

dist/css/bootstrap.css

@@ -4662,13 +4662,13 @@ a.thumbnail:focus {
   background-color: #808080;
 }
 
-.label-danger {
+.label-primary {
-  background-color: #d9534f;
+  background-color: #428bca;
 }
 
-.label-danger[href]:hover,
+.label-primary[href]:hover,
-.label-danger[href]:focus {
+.label-primary[href]:focus {
-  background-color: #c9302c;
+  background-color: #3071a9;
 }
 
 .label-success {
@@ -4680,6 +4680,15 @@ a.thumbnail:focus {
   background-color: #449d44;
 }
 
+.label-info {
+  background-color: #5bc0de;
+}
+
+.label-info[href]:hover,
+.label-info[href]:focus {
+  background-color: #31b0d5;
+}
+
 .label-warning {
   background-color: #f0ad4e;
 }
@@ -4689,13 +4698,13 @@ a.thumbnail:focus {
   background-color: #ec971f;
 }
 
-.label-info {
+.label-danger {
-  background-color: #5bc0de;
+  background-color: #d9534f;
 }
 
-.label-info[href]:hover,
+.label-danger[href]:hover,
-.label-info[href]:focus {
+.label-danger[href]:focus {
-  background-color: #31b0d5;
+  background-color: #c9302c;
 }
 
 .badge {

less/labels.less

@@ -37,18 +37,22 @@
   .label-variant(@label-default-bg);
 }
 
-.label-danger {
+.label-primary {
-  .label-variant(@label-danger-bg);
+  .label-variant(@label-primary-bg);
 }
 
 .label-success {
   .label-variant(@label-success-bg);
 }
 
+.label-info {
+  .label-variant(@label-info-bg);
+}
+
 .label-warning {
   .label-variant(@label-warning-bg);
 }
 
-.label-info {
+.label-danger {
-  .label-variant(@label-info-bg);
+  .label-variant(@label-danger-bg);
 }

less/variables.less

@@ -396,6 +396,7 @@
 // -------------------------
 
 @label-default-bg:            @gray-light;
+@label-primary-bg:            @brand-primary;
 @label-success-bg:            @brand-success;
 @label-info-bg:               @brand-info;
 @label-warning-bg:            @brand-warning;