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>