rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity

add example of width util

Browse Source
This commit is contained in:
Mark Otto 2016-12-30 21:43:16 -08:00 committed by Mark Otto
parent 217e13a11b
commit a7931f0c1e
1 changed files with 9 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
docs/components/progress.md
View File

@ -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.