diff options
| author | Mark Otto <[email protected]> | 2016-12-30 21:43:16 -0800 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2016-12-30 22:46:00 -0800 |
| commit | a7931f0c1e85d0e795877ddca78acce240047aff (patch) | |
| tree | 5de80eb9fcfcd751bef840771d8aff81638fd27e /docs/components | |
| parent | 217e13a11b48f36808b547c3e86f94e721e9c0a6 (diff) | |
| download | bootstrap-a7931f0c1e85d0e795877ddca78acce240047aff.tar.xz bootstrap-a7931f0c1e85d0e795877ddca78acce240047aff.zip | |
add example of width util
Diffstat (limited to 'docs/components')
| -rw-r--r-- | docs/components/progress.md | 10 |
1 files changed, 9 insertions, 1 deletions
diff --git a/docs/components/progress.md b/docs/components/progress.md index 29436c365..e475f416f 100644 --- 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. |