Bootstrap 5.3 progress bars use an outer .progress element for accessibility semantics and an inner .progress-bar element for the visible fill. The examples below are free to copy and adapt; check your installed Bootstrap version before using them, because older tutorials put the ARIA attributes on the inner bar instead.
Start with accessible Bootstrap 5.3 markup
In Bootstrap 5.3, give the outer wrapper a progress-bar role, accessible name, and current, minimum, and maximum values. Set the displayed completion amount as the inner bar’s width.
As an Amazon Associate I earn from qualifying purchases.
<div class="progress" role="progressbar" aria-label="File upload progress" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar" style="width: 60%"></div>
</div>Here, the current value is 60 on a scale from 0 to 100, matching the visual width of 60%. Keep the numeric value and width in sync when progress changes. Bootstrap’s Progress component documentation shows this structure and additional examples.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Scan for outdated or missing drivers - takes under a minute3Repair Windows errors before they cause bigger problemsChoose a visual style for the status
These are presentation variants, not different progress-bar products. Use the simplest style that makes the task’s status easy to understand.
#1 Best Overall
Add a visible label
For a percentage that should be visible to everyone, put the text inside the bar and retain the accessible name and values on the outer wrapper.
<div class="progress" role="progressbar" aria-label="Installation progress" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar" style="width: 60%">60%</div>
</div>At low completion levels, there may not be enough room for the text. Bootstrap recommends displaying a label outside the bar when text could overlap it or become difficult to read. Color alone does not communicate the status to assistive technology.
Set a custom height
Use a height on the outer wrapper when the default bar is too short or too tall for your layout.
<div class="progress" role="progressbar" aria-label="Download progress" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="height: 1.5rem">
<div class="progress-bar" style="width: 40%"></div>
</div>Use a contextual color
Bootstrap’s contextual classes let you distinguish statuses visually. Keep a text label or other cue as well, rather than making color carry the meaning by itself.
<div class="progress" role="progressbar" aria-label="Backup progress" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-success" style="width: 75%">75%</div>
</div>Use stripes or animation sparingly
For a striped fill, add .progress-bar-striped. Add .progress-bar-animated to animate the stripes:
<div class="progress" role="progressbar" aria-label="Processing progress" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 50%"></div>
</div>Animation can draw attention to activity, but a moving fill may distract from other content. Use it only when motion adds useful status information.
Rank #4
Show stacked segments
Place multiple inner bars in one outer wrapper when the total consists of distinct segments. The accessible values on the wrapper should describe the overall progress represented by the combined bar; use visible labels or another explanation if people need to distinguish the segments.
<div class="progress" role="progressbar" aria-label="Storage allocation" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar" style="width: 40%">Used</div>
<div class="progress-bar bg-info" style="width: 30%">Reserved</div>
</div>Check version differences before copying older examples
Bootstrap 4.3 examples put role="progressbar" and the value attributes on the inner .progress-bar. Bootstrap 5.3 instead places the progress role, accessible name, and values on the outer .progress wrapper. Compare the Bootstrap 4.3 examples with the Bootstrap 5.3 structure, and follow the documentation for the version actually installed in your project. Bootstrap says the older structure remains supported for now, while recommending the new markup for improved screen-reader compatibility. Its v5 migration notes explain that some screen readers did not announce a zero value with the older arrangement.
Use React Bootstrap in a React project
If the project is built with React, React Bootstrap provides component-based progress bars, including labels, stripes, animation, and stacked segments. See its Progress bars documentation for the component API and examples; use that API rather than mixing JSX with copied HTML markup.
Quick Recap
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.
