From 3b4b9a7fe58082cde1545167e511a4acc6d5a0fb Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Fri, 7 Feb 2014 01:16:34 -0800
Subject: Fixes #12614: Add progress bar example with visible label

---
 docs/components.html | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

(limited to 'docs/components.html')

diff --git a/docs/components.html b/docs/components.html
index 264e9c763..45c7d2e4b 100644
--- 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>
-- 
cgit v1.2.3