stack mutliple progress bars

diff --git a/docs/components.html b/docs/components.html
index e4bb55188ba8b53276bd9db4fd2a5132e7fecc82..0eb929d8366b2759e8364a485b95978ca9ca700d 100644 (file)
--- a/docs/components.html
+++ b/docs/components.html
@@ -2067,6 +2067,26 @@
 </div>
 </pre>
 
+          <h3>Stacked</h3>
+          <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-success" style="width: 35%"></div>
+              <div class="bar-warning" style="width: 20%"></div>
+              <div class="bar-danger" style="width: 10%"></div>
+            </div>
+          </div>
+<pre class="prettyprint linenums">
+&lt;div class="progress"&gt;
+  &lt;div class="bar-success"
+       style="width: 35%;"&gt;&lt;/div&gt;
+  &lt;div class="bar-warning"
+       style="width: 20%;"&gt;&lt;/div&gt;
+  &lt;div class="bar-danger"
+       style="width: 10%;"&gt;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
 
           <hr class="bs-docs-separator">
 

diff --git a/less/progress-bars.less b/less/progress-bars.less
index 768f55ad92ababb2c1773b5c82dd40b56b7ae120..c3de308ebf6e0d5f74454a533afadecf7ab3d002 100644 (file)
--- a/less/progress-bars.less
+++ b/less/progress-bars.less
@@ -56,6 +56,7 @@
   width: 0%;
   height: 100%;
   color: @white;
+  float: left;
   font-size: 12px;
   text-align: center;
   text-shadow: 0 -1px 0 rgba(0,0,0,.25);
@@ -86,33 +87,33 @@
 // ------
 
 // Danger (red)
-.progress-danger .bar {
+.progress-danger .bar, .progress .bar-danger {
   #gradient > .vertical(#ee5f5b, #c43c35);
 }
-.progress-danger.progress-striped .bar {
+.progress-danger.progress-striped .bar, .progress-striped .bar-danger {
   #gradient > .striped(#ee5f5b);
 }
 
 // Success (green)
-.progress-success .bar {
+.progress-success .bar, .progress .bar-success {
   #gradient > .vertical(#62c462, #57a957);
 }
-.progress-success.progress-striped .bar {
+.progress-success.progress-striped .bar, .progress-striped .bar-success {
   #gradient > .striped(#62c462);
 }
 
 // Info (teal)
-.progress-info .bar {
+.progress-info .bar, .progress .bar-info {
   #gradient > .vertical(#5bc0de, #339bb9);
 }
-.progress-info.progress-striped .bar {
+.progress-info.progress-striped .bar, .progress-striped .bar-info {
   #gradient > .striped(#5bc0de);
 }
 
 // Warning (orange)
-.progress-warning .bar {
+.progress-warning .bar, .progress .bar-warning {
   #gradient > .vertical(lighten(@orange, 15%), @orange);
 }
-.progress-warning.progress-striped .bar {
+.progress-warning.progress-striped .bar, .progress-striped .bar-warning {
   #gradient > .striped(lighten(@orange, 15%));
 }