add example of width util

diff --git a/docs/components/progress.md b/docs/components/progress.md
index 29436c365f0f628dfee67d033db534d86fbfc4b8..e475f416fdf8a9e4d8ba30c0580d1d11cc7941ee 100644 (file)
--- a/docs/components/progress.md
+++ b/docs/components/progress.md
@@ -18,7 +18,7 @@ Progress components are built with two HTML elements, some CSS to set the width,
 
 - We use the `.progress` as a wrapper to indicate the max value of the progress bar.
 - We use the inner `.progress-bar` to indicate the progress so far.
-- The `.progress-bar` requires an inline style or custom CSS to set their width.
+- The `.progress-bar` requires an inline style, utility class, or custom CSS to set their width.
 - The `.progress-bar` also requires some `role` and `aria` attributes to make it accessible.
 
 Put that all together, and you have the following examples.
@@ -41,6 +41,14 @@ Put that all together, and you have the following examples.
 </div>
 {% endexample %}
 
+Bootstrap provides a handful of [utilities for setting width]({{ site.baseurl }}/utilities/sizing-and-positioning/#width-and-height). Depending on your needs, these may help with quickly configuring progress.
+
+{% example html %}
+<div class="progress">
+  <div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
+</div>
+{% endexample %}
+
 ## Customizing
 
 Customize the appearance of your progress bars with custom CSS, background utilities, stripes, and more.