Fixes #12848: Account for and document progress bars at 0-3%

dist/css/bootstrap-rtl.css

@@ -5717,6 +5717,19 @@ a.thumbnail.active {
           animation: progress-bar-stripes 2s linear infinite;
 }
 
+.progress-bar[aria-valuenow="1"],
+.progress-bar[aria-valuenow="2"] {
+  min-width: 30px;
+}
+
+.progress-bar[aria-valuenow="0"] {
+  min-width: 30px;
+  color: #999;
+  background-color: transparent;
+  background-image: none;
+  box-shadow: none;
+}
+
 .progress-bar-success {
   background-color: #5cb85c;
 }

dist/css/bootstrap.css

@@ -4590,6 +4590,17 @@ a.thumbnail.active {
   -webkit-animation: progress-bar-stripes 2s linear infinite;
           animation: progress-bar-stripes 2s linear infinite;
 }
+.progress-bar[aria-valuenow="1"],
+.progress-bar[aria-valuenow="2"] {
+  min-width: 30px;
+}
+.progress-bar[aria-valuenow="0"] {
+  min-width: 30px;
+  color: #999;
+  background-color: transparent;
+  background-image: none;
+  box-shadow: none;
+}
 .progress-bar-success {
   background-color: #5cb85c;
 }

docs/components.html

@@ -2280,6 +2280,34 @@ body { padding-bottom: 70px; }
 </div>
 {% endhighlight %}
 
+  <h3 id="progress-low-percentages">Low percentages</h3>
+  <p>Progress bars representing low single digit percentages, as well as 0%, include a <code>min-width: 20px;</code> for legibility.</p>
+  <div class="bs-example">
+    <div class="progress">
+      <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
+        0%
+      </div>
+    </div>
+    <div class="progress">
+      <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="width: 2%;">
+        2%
+      </div>
+    </div>
+  </div>
+{% highlight html %}
+<div class="progress">
+  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
+    0%
+  </div>
+</div>
+<div class="progress">
+  <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="width: 2%;">
+    2%
+  </div>
+</div>
+{% endhighlight %}
+
+
   <h3 id="progress-alternatives">Contextual alternatives</h3>
   <p>Progress bars use some of the same button and alert classes for consistent styles.</p>
   <div class="bs-example">

less/progress-bars.less

@@ -58,6 +58,22 @@
   .animation(progress-bar-stripes 2s linear infinite);
 }
 
+// Account for lower percentages
+.progress-bar {
+  &[aria-valuenow="1"],
+  &[aria-valuenow="2"] {
+    min-width: 30px;
+  }
+
+  &[aria-valuenow="0"] {
+    color: @gray-light;
+    min-width: 30px;
+    background-color: transparent;
+    background-image: none;
+    box-shadow: none;
+  }
+}
+
 
 
 // Variations