rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-21 18:54:30 +01:00
Code Issues Actions Packages Releases Activity

Update site/content/docs/5.3/components/progress.md
All checks were successful
BrowserStack / browserstack (push) Has been skipped
Details

Browse Source
This commit is contained in:
Mark Otto 2025-02-15 21:27:27 -08:00 committed by GitHub
parent ec0f3b78d6
commit aebd50a2dd
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 1 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
site/content/docs/5.3/components/progress.md
View File

@ -80,7 +80,7 @@ Add labels to your progress bars by placing text within the `.progress-bar`.
Note that by default, the content inside the `.progress-bar` is controlled with `overflow: hidden`, so it doesn't bleed out of the bar. If your progress bar is shorter than its label, the content will be capped and may become unreadable. To change this behavior, you can use `.overflow-visible` from the [overflow utilities]({{< docsref "/utilities/overflow" >}}).
{{< callout warning >}}
**Accessibility warning:** Long labels may not be fully accessible with this method. As it relies on the text color having the right contrast ratio with both the `.progress` and `.progress-bar` background colors, your color palette could be incompatible with this approach.
Labels longer than the progress bar within may not be fully accessible using this method because it relies on the text color having the correct contrast ratio with both the `.progress` and `.progress-bar` background colors. Use caution when implementing this example.
If the text can overlap the progress bar, we often recommend displaying the label outside of the progress bar for better accessibility.
{{< /callout >}}