Recommended Free Tools
To create a Bootstrap progress bar, put the progress semantics and accessible name on a .progress wrapper, then set the visible fill width on its child .progress-bar. Bootstrap’s documented pattern below is for v5.3; “V07” is not a Bootstrap release number.
Start with the Bootstrap v5.3 progress bar pattern
The wrapper defines the progress range and exposes its current value to assistive technology. The nested bar supplies the visible fill.
As an Amazon Associate I earn from qualifying purchases.
<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar" style="width: 25%"></div>
</div>Keep the visible width and aria-valuenow in agreement. For a determinate bar that changes as work proceeds, update the numeric ARIA value whenever you update the fill width. The range shown here runs from 0 to 100; use the actual minimum and maximum for your task.
See the Bootstrap v5.3 progress component documentation for the component’s classes and examples.
#1 Best Overall
Size the fill and container
Set the fill’s width on .progress-bar, using an inline width, a Bootstrap width utility, or custom CSS. For example, w-75 sets a 75% width:
<div class="progress" role="progressbar" aria-label="Upload progress" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar w-75"></div>
</div>Set height on the .progress container, not the fill. For example, custom CSS can give the wrapper a taller track while the nested bar continues to fill it.
Add a label without hiding progress information
Short text such as 25% can sit inside the filled bar. A longer label may be clipped when the fill is narrow, and text over a colored fill may be difficult to read. If it could overlap or become unreadable, put the label outside the bar and keep the accessible name and numeric values on the wrapper.
Do not communicate success, warning, failure, or another meaning through color alone. Include visible text or a visually hidden text alternative, and check the contrast between any label and its background. Bootstrap notes that some combinations in its default palette may not provide sufficient contrast; a contextual color class is not proof of accessibility. See the Bootstrap v5.3 accessibility overview.
Apply contextual colors, stripes, or animation
Bootstrap supports contextual background classes for progress fills, as well as striped and animated striped styles. Add .progress-bar-striped to the fill for stripes; add .progress-bar-animated to animate those stripes. These are visual treatments, not substitutes for a text cue about what the progress means.
Stack multiple progress segments
For a segmented bar, use .progress-stacked around multiple .progress elements. Set each segment’s visual width on its own .progress element, and provide each wrapper with its own accessible name and appropriate range and current value.
Rank #4
<div class="progress-stacked">
<div class="progress" role="progressbar" aria-label="Completed" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%">
<div class="progress-bar"></div>
</div>
<div class="progress" role="progressbar" aria-label="In progress" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100" style="width: 35%">
<div class="progress-bar bg-info"></div>
</div>
</div>Choose the segment labels and values to describe what each section represents; do not rely on the different fills alone to distinguish their meanings.
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchPC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Update older progress-bar snippets to v5.3
Older Bootstrap examples put role="progressbar" and the ARIA values on the inner .progress-bar. In v5.3, put them on the outer .progress wrapper instead. Bootstrap’s migration guide explains that some screen readers did not announce zero-value bars with the prior placement, and recommends the new markup for improved compatibility. The guide says the old structure continues to work as before up to v6, but it is not the recommended pattern for new v5.3 code.
Read the Bootstrap v5.3 migration guide for the change and its compatibility note.
Quick Recap
Accessibility checklist
- Give every progress wrapper an accessible name using
aria-labeloraria-labelledby. - Put
role="progressbar",aria-valuemin,aria-valuemax, andaria-valuenowon the wrapper. - Keep the visible fill width consistent with the current numeric value.
- Provide text or another non-color cue for the status the bar represents.
- Check label contrast and move text outside the bar if it may be clipped or hard to read.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
