Refactor colors and progress bars

* Buttons and progress bars now make use of more semantic global @brand- colors
* Progress bars have been rewritten to reduce the number of possible selectors
* Instead of .progress .bar, it's .progress-bar for individual bars of color, ultimately making for less CSS

3 files changed, 111 insertions, 129 deletions

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index d534985d9..d67148b13 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -4102,7 +4102,7 @@ a.counter:hover {
           box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
 }
 
-.progress .bar {
+.progress-bar {
   float: left;
   width: 0;
   height: 100%;
@@ -4110,9 +4110,7 @@ a.counter:hover {
   color: #fff;
   text-align: center;
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
-  background-color: #149bdf;
-  /*#gradient > .vertical(#149bdf, #0480be);*/
-
+  background-color: #428bca;
   -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
           box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
   -webkit-box-sizing: border-box;
@@ -4124,8 +4122,8 @@ a.counter:hover {
           transition: width 0.6s ease;
 }
 
-.progress-striped .bar {
-  background-color: #149bdf;
+.progress-striped .progress-bar {
+  background-color: #428bca;
   background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
   background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
   background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
@@ -4137,7 +4135,7 @@ a.counter:hover {
           background-size: 40px 40px;
 }
 
-.progress.active .bar {
+.progress.active .progress-bar {
   -webkit-animation: progress-bar-stripes 2s linear infinite;
      -moz-animation: progress-bar-stripes 2s linear infinite;
       -ms-animation: progress-bar-stripes 2s linear infinite;
@@ -4145,16 +4143,12 @@ a.counter:hover {
           animation: progress-bar-stripes 2s linear infinite;
 }
 
-.progress-danger .bar,
-.progress .bar-danger {
-  background-color: #ee5f5b;
-  /*#gradient > .vertical(#ee5f5b, #c43c35);*/
-
+.progress-bar-danger {
+  background-color: #d9534f;
 }
 
-.progress-danger.progress-striped .bar,
-.progress-striped .bar-danger {
-  background-color: #ee5f5b;
+.progress-striped .progress-bar-danger {
+  background-color: #d9534f;
   background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
   background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
   background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
@@ -4162,16 +4156,12 @@ a.counter:hover {
   background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
 }
 
-.progress-success .bar,
-.progress .bar-success {
-  background-color: #62c462;
-  /*#gradient > .vertical(#62c462, #57a957);*/
-
+.progress-bar-success {
+  background-color: #5cb85c;
 }
 
-.progress-success.progress-striped .bar,
-.progress-striped .bar-success {
-  background-color: #62c462;
+.progress-striped .progress-bar-success {
+  background-color: #5cb85c;
   background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
   background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
   background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
@@ -4179,16 +4169,12 @@ a.counter:hover {
   background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
 }
 
-.progress-info .bar,
-.progress .bar-info {
-  background-color: #5bc0de;
-  /*#gradient > .vertical(#5bc0de, #339bb9);*/
-
+.progress-bar-warning {
+  background-color: #f0ad4e;
 }
 
-.progress-info.progress-striped .bar,
-.progress-striped .bar-info {
-  background-color: #5bc0de;
+.progress-striped .progress-bar-warning {
+  background-color: #f0ad4e;
   background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
   background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
   background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
@@ -4196,16 +4182,12 @@ a.counter:hover {
   background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
 }
 
-.progress-warning .bar,
-.progress .bar-warning {
-  background-color: #fbb450;
-  /*#gradient > .vertical(lighten(#f89406, 15%), #f89406);*/
-
+.progress-bar-info {
+  background-color: #5bc0de;
 }
 
-.progress-warning.progress-striped .bar,
-.progress-striped .bar-warning {
-  background-color: #fbb450;
+.progress-striped .progress-bar-info {
+  background-color: #5bc0de;
   background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
   background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
   background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
diff --git a/docs/components.html b/docs/components.html
index a79ce01fd..4293e43bf 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -1614,7 +1614,7 @@
         ================================================== -->
         <section id="progress">
           <div class="page-header">
-            <h1>Progress bars <small>For loading, redirecting, or action status</small></h1>
+            <h1>Progress bars</h1>
           </div>
 
           <h2>Examples and markup</h2>
@@ -1623,12 +1623,12 @@
           <p>Default progress bar with a vertical gradient.</p>
           <div class="bs-docs-example">
             <div class="progress">
-              <div class="bar" style="width: 60%;"></div>
+              <div class="progress-bar" style="width: 60%;"></div>
             </div>
           </div>
 <pre class="prettyprint linenums">
 &lt;div class="progress"&gt;
-  &lt;div class="bar" style="width: 60%;"&gt;&lt;/div&gt;
+  &lt;div class="progress-bar" style="width: 60%;"&gt;&lt;/div&gt;
 &lt;/div&gt;
 </pre>
 
@@ -1636,12 +1636,12 @@
           <p>Uses a gradient to create a striped effect. Not available in IE8.</p>
           <div class="bs-docs-example">
             <div class="progress progress-striped">
-              <div class="bar" style="width: 20%;"></div>
+              <div class="progress-bar" style="width: 20%;"></div>
             </div>
           </div>
 <pre class="prettyprint linenums">
 &lt;div class="progress progress-striped"&gt;
-  &lt;div class="bar" style="width: 20%;"&gt;&lt;/div&gt;
+  &lt;div class="progress-bar" style="width: 20%;"&gt;&lt;/div&gt;
 &lt;/div&gt;
 </pre>
 
@@ -1649,12 +1649,12 @@
           <p>Add <code>.active</code> to <code>.progress-striped</code> to animate the stripes right to left. Not available in all versions of IE.</p>
           <div class="bs-docs-example">
             <div class="progress progress-striped active">
-              <div class="bar" style="width: 45%"></div>
+              <div class="progress-bar" style="width: 45%"></div>
             </div>
           </div>
 <pre class="prettyprint linenums">
 &lt;div class="progress progress-striped active"&gt;
-  &lt;div class="bar" style="width: 40%;"&gt;&lt;/div&gt;
+  &lt;div class="progress-bar" style="width: 40%;"&gt;&lt;/div&gt;
 &lt;/div&gt;
 </pre>
 
@@ -1662,16 +1662,16 @@
           <p>Place multiple bars into the same <code>.progress</code> to stack them.</p>
           <div class="bs-docs-example">
             <div class="progress">
-              <div class="bar bar-success" style="width: 35%"></div>
-              <div class="bar bar-warning" style="width: 20%"></div>
-              <div class="bar bar-danger" style="width: 10%"></div>
+              <div class="progress-bar progress-bar-success" style="width: 35%"></div>
+              <div class="progress-bar progress-bar-warning" style="width: 20%"></div>
+              <div class="progress-bar progress-bar-danger" style="width: 10%"></div>
             </div>
           </div>
 <pre class="prettyprint linenums">
 &lt;div class="progress"&gt;
-  &lt;div class="bar bar-success" style="width: 35%;"&gt;&lt;/div&gt;
-  &lt;div class="bar bar-warning" style="width: 20%;"&gt;&lt;/div&gt;
-  &lt;div class="bar bar-danger" style="width: 10%;"&gt;&lt;/div&gt;
+  &lt;div class="progress-bar progress-bar-success" style="width: 35%;"&gt;&lt;/div&gt;
+  &lt;div class="progress-bar progress-bar-warning" style="width: 20%;"&gt;&lt;/div&gt;
+  &lt;div class="progress-bar progress-bar-danger" style="width: 10%;"&gt;&lt;/div&gt;
 &lt;/div&gt;
 </pre>
 
@@ -1684,62 +1684,62 @@
           <h3>Additional colors</h3>
           <p>Progress bars use some of the same button and alert classes for consistent styles.</p>
           <div class="bs-docs-example">
-            <div class="progress progress-info" style="margin-bottom: 9px;">
-              <div class="bar" style="width: 20%"></div>
+            <div class="progress" style="margin-bottom: 9px;">
+              <div class="progress-bar progress-bar-info" style="width: 20%"></div>
             </div>
-            <div class="progress progress-success" style="margin-bottom: 9px;">
-              <div class="bar" style="width: 40%"></div>
+            <div class="progress" style="margin-bottom: 9px;">
+              <div class="progress-bar progress-bar-success" style="width: 40%"></div>
             </div>
-            <div class="progress progress-warning" style="margin-bottom: 9px;">
-              <div class="bar" style="width: 60%"></div>
+            <div class="progress" style="margin-bottom: 9px;">
+              <div class="progress-bar progress-bar-warning" style="width: 60%"></div>
             </div>
-            <div class="progress progress-danger">
-              <div class="bar" style="width: 80%"></div>
+            <div class="progress">
+              <div class="progress-bar progress-bar-danger" style="width: 80%"></div>
             </div>
           </div>
 <pre class="prettyprint linenums">
-&lt;div class="progress progress-info"&gt;
-  &lt;div class="bar" style="width: 20%"&gt;&lt;/div&gt;
+&lt;div class="progress"&gt;
+  &lt;div class="progress-bar progress-bar-info" style="width: 20%"&gt;&lt;/div&gt;
 &lt;/div&gt;
-&lt;div class="progress progress-success"&gt;
-  &lt;div class="bar" style="width: 40%"&gt;&lt;/div&gt;
+&lt;div class="progress"&gt;
+  &lt;div class="progress-bar progress-bar-success" style="width: 40%"&gt;&lt;/div&gt;
 &lt;/div&gt;
-&lt;div class="progress progress-warning"&gt;
-  &lt;div class="bar" style="width: 60%"&gt;&lt;/div&gt;
+&lt;div class="progress"&gt;
+  &lt;div class="progress-bar progress-bar-warning" style="width: 60%"&gt;&lt;/div&gt;
 &lt;/div&gt;
-&lt;div class="progress progress-danger"&gt;
-  &lt;div class="bar" style="width: 80%"&gt;&lt;/div&gt;
+&lt;div class="progress"&gt;
+  &lt;div class="progress-bar progress-bar-danger" style="width: 80%"&gt;&lt;/div&gt;
 &lt;/div&gt;
 </pre>
 
           <h3>Striped bars</h3>
           <p>Similar to the solid colors, we have varied striped progress bars.</p>
           <div class="bs-docs-example">
-            <div class="progress progress-info progress-striped" style="margin-bottom: 9px;">
-              <div class="bar" style="width: 20%"></div>
+            <div class="progress progress-striped" style="margin-bottom: 9px;">
+              <div class="progress-bar progress-bar-info" style="width: 20%"></div>
             </div>
-            <div class="progress progress-success progress-striped" style="margin-bottom: 9px;">
-              <div class="bar" style="width: 40%"></div>
+            <div class="progress progress-striped" style="margin-bottom: 9px;">
+              <div class="progress-bar progress-bar-success" style="width: 40%"></div>
             </div>
-            <div class="progress progress-warning progress-striped" style="margin-bottom: 9px;">
-              <div class="bar" style="width: 60%"></div>
+            <div class="progress progress-striped" style="margin-bottom: 9px;">
+              <div class="progress-bar progress-bar-warning" style="width: 60%"></div>
             </div>
-            <div class="progress progress-danger progress-striped">
-              <div class="bar" style="width: 80%"></div>
+            <div class="progress progress-striped">
+              <div class="progress-bar progress-bar-danger" style="width: 80%"></div>
             </div>
           </div>
 <pre class="prettyprint linenums">
-&lt;div class="progress progress-info progress-striped"&gt;
-  &lt;div class="bar" style="width: 20%"&gt;&lt;/div&gt;
+&lt;div class="progress progress-striped"&gt;
+  &lt;div class="progress-bar progress-bar-info" style="width: 20%"&gt;&lt;/div&gt;
 &lt;/div&gt;
-&lt;div class="progress progress-success progress-striped"&gt;
-  &lt;div class="bar" style="width: 40%"&gt;&lt;/div&gt;
+&lt;div class="progress progress-striped"&gt;
+  &lt;div class="progress-bar progress-bar-success" style="width: 40%"&gt;&lt;/div&gt;
 &lt;/div&gt;
-&lt;div class="progress progress-warning progress-striped"&gt;
-  &lt;div class="bar" style="width: 60%"&gt;&lt;/div&gt;
+&lt;div class="progress progress-striped"&gt;
+  &lt;div class="progress-bar progress-bar-warning" style="width: 60%"&gt;&lt;/div&gt;
 &lt;/div&gt;
-&lt;div class="progress progress-danger progress-striped"&gt;
-  &lt;div class="bar" style="width: 80%"&gt;&lt;/div&gt;
+&lt;div class="progress progress-striped"&gt;
+  &lt;div class="progress-bar progress-bar-danger" style="width: 80%"&gt;&lt;/div&gt;
 &lt;/div&gt;
 </pre>
 
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 788801eab..7f8729487 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -1546,7 +1546,7 @@
         ================================================== -->
         <section id="progress">
           <div class="page-header">
-            <h1>Progress bars <small>For loading, redirecting, or action status</small></h1>
+            <h1>Progress bars</h1>
           </div>
 
           <h2>Examples and markup</h2>
@@ -1555,12 +1555,12 @@
           <p>Default progress bar with a vertical gradient.</p>
           <div class="bs-docs-example">
             <div class="progress">
-              <div class="bar" style="width: 60%;"></div>
+              <div class="progress-bar" style="width: 60%;"></div>
             </div>
           </div>
 <pre class="prettyprint linenums">
 &lt;div class="progress"&gt;
-  &lt;div class="bar" style="width: 60%;"&gt;&lt;/div&gt;
+  &lt;div class="progress-bar" style="width: 60%;"&gt;&lt;/div&gt;
 &lt;/div&gt;
 </pre>
 
@@ -1568,12 +1568,12 @@
           <p>Uses a gradient to create a striped effect. Not available in IE8.</p>
           <div class="bs-docs-example">
             <div class="progress progress-striped">
-              <div class="bar" style="width: 20%;"></div>
+              <div class="progress-bar" style="width: 20%;"></div>
             </div>
           </div>
 <pre class="prettyprint linenums">
 &lt;div class="progress progress-striped"&gt;
-  &lt;div class="bar" style="width: 20%;"&gt;&lt;/div&gt;
+  &lt;div class="progress-bar" style="width: 20%;"&gt;&lt;/div&gt;
 &lt;/div&gt;
 </pre>
 
@@ -1581,12 +1581,12 @@
           <p>Add <code>.active</code> to <code>.progress-striped</code> to animate the stripes right to left. Not available in all versions of IE.</p>
           <div class="bs-docs-example">
             <div class="progress progress-striped active">
-              <div class="bar" style="width: 45%"></div>
+              <div class="progress-bar" style="width: 45%"></div>
             </div>
           </div>
 <pre class="prettyprint linenums">
 &lt;div class="progress progress-striped active"&gt;
-  &lt;div class="bar" style="width: 40%;"&gt;&lt;/div&gt;
+  &lt;div class="progress-bar" style="width: 40%;"&gt;&lt;/div&gt;
 &lt;/div&gt;
 </pre>
 
@@ -1594,16 +1594,16 @@
           <p>Place multiple bars into the same <code>.progress</code> to stack them.</p>
           <div class="bs-docs-example">
             <div class="progress">
-              <div class="bar bar-success" style="width: 35%"></div>
-              <div class="bar bar-warning" style="width: 20%"></div>
-              <div class="bar bar-danger" style="width: 10%"></div>
+              <div class="progress-bar progress-bar-success" style="width: 35%"></div>
+              <div class="progress-bar progress-bar-warning" style="width: 20%"></div>
+              <div class="progress-bar progress-bar-danger" style="width: 10%"></div>
             </div>
           </div>
 <pre class="prettyprint linenums">
 &lt;div class="progress"&gt;
-  &lt;div class="bar bar-success" style="width: 35%;"&gt;&lt;/div&gt;
-  &lt;div class="bar bar-warning" style="width: 20%;"&gt;&lt;/div&gt;
-  &lt;div class="bar bar-danger" style="width: 10%;"&gt;&lt;/div&gt;
+  &lt;div class="progress-bar progress-bar-success" style="width: 35%;"&gt;&lt;/div&gt;
+  &lt;div class="progress-bar progress-bar-warning" style="width: 20%;"&gt;&lt;/div&gt;
+  &lt;div class="progress-bar progress-bar-danger" style="width: 10%;"&gt;&lt;/div&gt;
 &lt;/div&gt;
 </pre>
 
@@ -1616,62 +1616,62 @@
           <h3>Additional colors</h3>
           <p>Progress bars use some of the same button and alert classes for consistent styles.</p>
           <div class="bs-docs-example">
-            <div class="progress progress-info" style="margin-bottom: 9px;">
-              <div class="bar" style="width: 20%"></div>
+            <div class="progress" style="margin-bottom: 9px;">
+              <div class="progress-bar progress-bar-info" style="width: 20%"></div>
             </div>
-            <div class="progress progress-success" style="margin-bottom: 9px;">
-              <div class="bar" style="width: 40%"></div>
+            <div class="progress" style="margin-bottom: 9px;">
+              <div class="progress-bar progress-bar-success" style="width: 40%"></div>
             </div>
-            <div class="progress progress-warning" style="margin-bottom: 9px;">
-              <div class="bar" style="width: 60%"></div>
+            <div class="progress" style="margin-bottom: 9px;">
+              <div class="progress-bar progress-bar-warning" style="width: 60%"></div>
             </div>
-            <div class="progress progress-danger">
-              <div class="bar" style="width: 80%"></div>
+            <div class="progress">
+              <div class="progress-bar progress-bar-danger" style="width: 80%"></div>
             </div>
           </div>
 <pre class="prettyprint linenums">
-&lt;div class="progress progress-info"&gt;
-  &lt;div class="bar" style="width: 20%"&gt;&lt;/div&gt;
+&lt;div class="progress"&gt;
+  &lt;div class="progress-bar progress-bar-info" style="width: 20%"&gt;&lt;/div&gt;
 &lt;/div&gt;
-&lt;div class="progress progress-success"&gt;
-  &lt;div class="bar" style="width: 40%"&gt;&lt;/div&gt;
+&lt;div class="progress"&gt;
+  &lt;div class="progress-bar progress-bar-success" style="width: 40%"&gt;&lt;/div&gt;
 &lt;/div&gt;
-&lt;div class="progress progress-warning"&gt;
-  &lt;div class="bar" style="width: 60%"&gt;&lt;/div&gt;
+&lt;div class="progress"&gt;
+  &lt;div class="progress-bar progress-bar-warning" style="width: 60%"&gt;&lt;/div&gt;
 &lt;/div&gt;
-&lt;div class="progress progress-danger"&gt;
-  &lt;div class="bar" style="width: 80%"&gt;&lt;/div&gt;
+&lt;div class="progress"&gt;
+  &lt;div class="progress-bar progress-bar-danger" style="width: 80%"&gt;&lt;/div&gt;
 &lt;/div&gt;
 </pre>
 
           <h3>Striped bars</h3>
           <p>Similar to the solid colors, we have varied striped progress bars.</p>
           <div class="bs-docs-example">
-            <div class="progress progress-info progress-striped" style="margin-bottom: 9px;">
-              <div class="bar" style="width: 20%"></div>
+            <div class="progress progress-striped" style="margin-bottom: 9px;">
+              <div class="progress-bar progress-bar-info" style="width: 20%"></div>
             </div>
-            <div class="progress progress-success progress-striped" style="margin-bottom: 9px;">
-              <div class="bar" style="width: 40%"></div>
+            <div class="progress progress-striped" style="margin-bottom: 9px;">
+              <div class="progress-bar progress-bar-success" style="width: 40%"></div>
             </div>
-            <div class="progress progress-warning progress-striped" style="margin-bottom: 9px;">
-              <div class="bar" style="width: 60%"></div>
+            <div class="progress progress-striped" style="margin-bottom: 9px;">
+              <div class="progress-bar progress-bar-warning" style="width: 60%"></div>
             </div>
-            <div class="progress progress-danger progress-striped">
-              <div class="bar" style="width: 80%"></div>
+            <div class="progress progress-striped">
+              <div class="progress-bar progress-bar-danger" style="width: 80%"></div>
             </div>
           </div>
 <pre class="prettyprint linenums">
-&lt;div class="progress progress-info progress-striped"&gt;
-  &lt;div class="bar" style="width: 20%"&gt;&lt;/div&gt;
+&lt;div class="progress progress-striped"&gt;
+  &lt;div class="progress-bar progress-bar-info" style="width: 20%"&gt;&lt;/div&gt;
 &lt;/div&gt;
-&lt;div class="progress progress-success progress-striped"&gt;
-  &lt;div class="bar" style="width: 40%"&gt;&lt;/div&gt;
+&lt;div class="progress progress-striped"&gt;
+  &lt;div class="progress-bar progress-bar-success" style="width: 40%"&gt;&lt;/div&gt;
 &lt;/div&gt;
-&lt;div class="progress progress-warning progress-striped"&gt;
-  &lt;div class="bar" style="width: 60%"&gt;&lt;/div&gt;
+&lt;div class="progress progress-striped"&gt;
+  &lt;div class="progress-bar progress-bar-warning" style="width: 60%"&gt;&lt;/div&gt;
 &lt;/div&gt;
-&lt;div class="progress progress-danger progress-striped"&gt;
-  &lt;div class="bar" style="width: 80%"&gt;&lt;/div&gt;
+&lt;div class="progress progress-striped"&gt;
+  &lt;div class="progress-bar progress-bar-danger" style="width: 80%"&gt;&lt;/div&gt;
 &lt;/div&gt;
 </pre>