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: [PATCH] Fixes #12614: Add progress bar example with visible label

---
 docs/_includes/nav-components.html |  1 +
 docs/components.html               | 17 +++++++++++++++++
 2 files changed, 18 insertions(+)

diff --git a/docs/_includes/nav-components.html b/docs/_includes/nav-components.html
index 131114883b..adc493eefd 100644
--- 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 264e9c7630..45c7d2e4b9 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>