stack mutliple progress bars

2 files changed, 29 insertions, 8 deletions

diff --git a/docs/components.html b/docs/components.html
index e4bb55188..0eb929d83 100644
--- 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 768f55ad9..c3de308eb 100644
--- 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%));
 }