Commit a7931f0c authored by Mark Otto's avatar Mark Otto Committed by Mark Otto
Browse files

add example of width util

parent 217e13a1
9 merge requests!28721Hot test,!27561Adds font-weight-medium to font weight classes,!22391V4 dev,!22143Fix selectable disabled toggle radio buttons,!22598test,!25326Adjust examples,!23995Add back cursor: pointer for .btn-link,!23178Spinner,!17021v4
Showing with 9 additions and 1 deletion
+9 -1
...@@ -18,7 +18,7 @@ Progress components are built with two HTML elements, some CSS to set the width, ...@@ -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. ...@@ -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.
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment