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 `.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. - 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. - The `.progress-bar` also requires some `role` and `aria` attributes to make it accessible.
Put that all together, and you have the following examples. 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> </div>
{% endexample %} {% 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 ## Customizing
Customize the appearance of your progress bars with custom CSS, background utilities, stripes, and more. Customize the appearance of your progress bars with custom CSS, background utilities, stripes, and more.