Fixes #12614: Add progress bar example with visible label

diff --git a/docs/_includes/nav-components.html b/docs/_includes/nav-components.html
index 131114883bb962f38b216a74ebe7bc1d18263ce8..adc493eefd01da4426e21ff98d105eaf39693c03 100644 (file)
--- a/docs/_includes/nav-components.html
+++ b/docs/_includes/nav-components.html
@@ -102,6 +102,7 @@
   <a href="#progress">Progress bars</a>
   <ul class="nav">
     <li><a href="#progress-basic">Basic example</a></li>
+    <li><a href="#progress-labels">With labels</a></li>
     <li><a href="#progress-alternatives">Contextual alternatives</a></li>
     <li><a href="#progress-striped">Striped</a></li>
     <li><a href="#progress-animated">Animated</a></li>

diff --git a/docs/components.html b/docs/components.html
index 264e9c763050ce27701f025b2838d8b3aef644aa..45c7d2e4b9830241cf7ba05035664023532040f0 100644 (file)
--- a/docs/components.html
+++ b/docs/components.html
@@ -2261,6 +2261,23 @@ body { padding-bottom: 70px; }
     <span class="sr-only">60% Complete</span>
   </div>
 </div>
+{% endhighlight %}
+
+  <h3 id="progress-label">With label</h3>
+  <p>Remove the <code>.sr-only</code> class from within the progress bar to show a visible percentage. For low percentages, consider adding a <code>min-width</code> to ensure the label's text is fully visible.</p>
+  <div class="bs-example">
+    <div class="progress">
+      <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
+        60%
+      </div>
+    </div>
+  </div>
+{% highlight html %}
+<div class="progress">
+  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
+    60% Complete
+  </div>
+</div>
 {% endhighlight %}
 
   <h3 id="progress-alternatives">Contextual alternatives</h3>