Bootstrap Progress Bars: Markup for Each Version

Updated 5 November 2026 · Standard formula, shown below

Use .progress as the outer wrapper and a child with .progress-bar for Bootstrap 3 and 4; Bootstrap 5 keeps those classes but changes the recommended accessibility markup and removes some older options. The right snippet depends on your Bootstrap version, so check the project’s loaded CSS or package version before copying markup.

Identify Your Bootstrap Version

Progress bars share a familiar class name across Bootstrap generations, but the surrounding structure and supported attributes are not identical. Confirm the version used by the page rather than relying on the latest example you find online.

Bootstrap 3: commonly uses .progress around .progress-bar. The bar’s width is typically set with inline CSS.
Bootstrap 4: uses the same basic wrapper and bar classes, with updated utility classes and documentation conventions.
Bootstrap 5: retains the wrapper and bar, while its documentation emphasizes progress semantics and accessible labeling. It also no longer includes certain older contextual classes.

Look in the project’s dependency file, compiled CSS, or the stylesheet URL for a version indicator. If these are not available, inspect the page’s existing components and compare them with documentation for the version actually loaded. Mixing markup from one version with CSS from another can leave a bar unstyled or partially styled.

Bootstrap 3 and 4 Markup

For a basic determinate bar in Bootstrap 3 or 4, put a .progress-bar element inside a .progress container and give the bar a width. The width represents the completed percentage.

<div class="progress">
  <div class="progress-bar" role="progressbar"
       style="width: 60%;" aria-valuenow="60"
       aria-valuemin="0" aria-valuemax="100">
    60%
  </div>
</div>

The example displays a bar filled to 60 percent and includes a text label. The ARIA attributes communicate the current value and range to assistive technology; they do not set the visual width. Keep the CSS width and numerical value aligned so the visual and announced progress do not contradict each other.

In Bootstrap 3, contextual classes such as .progress-bar-success were available for color variants. Bootstrap 4 introduced contextual background utilities such as .bg-success on the bar. These details make it important not to assume that a color class copied from one version works in another.

Bootstrap 5 Markup

Bootstrap 5 documents the bar as the element carrying progress semantics, with an accessible name supplied through aria-label or a related labeling attribute. A basic example is:

<div class="progress">
  <div class="progress-bar" role="progressbar"
       style="width: 60%;" aria-valuenow="60"
       aria-valuemin="0" aria-valuemax="100"
       aria-label="Upload progress">
    60%
  </div>
</div>

Bootstrap 5 also supports options such as striped bars and animation, using classes documented for that version. For example, a striped bar can use .progress-bar-striped; animation is added with .progress-bar-animated. Check the version-specific documentation before using modifiers, especially when maintaining a long-lived project.

Do not confuse Bootstrap’s required classes with accessibility attributes. The classes provide styling; roles and ARIA values describe the progress information to assistive technologies. A visible percentage is useful to many people, but it does not replace an accessible name or a correctly updated value.

How the Markup Works

The outer .progress element provides the track. The inner .progress-bar element is the filled portion. Its CSS width determines how much of the track appears complete: width: 25% fills one quarter, while width: 100% fills the whole track.

For a changing task, update both the width and the progress value when the task advances. For instance, at 75 percent, use style="width: 75%;" and aria-valuenow="75". If JavaScript controls the component, update the visible label too when it is meant to show a percentage. Keep the value within the stated minimum and maximum, normally 0 and 100.

Determinate progress: use when the amount completed can be measured, such as files uploaded out of a known total.
Indeterminate activity: use a loading indicator rather than inventing a percentage when completion cannot be estimated meaningfully.
Multiple segments: place multiple bars inside one track when each segment represents a meaningful part of the whole, and ensure their widths add up to the intended total.

Choose Markup and Avoid Common Problems

Start with the smallest example documented for your installed version, then add color, labels, animation, or multiple segments as needed. A progress bar is appropriate for measurable progress, not simply as decoration or a substitute for a spinner when there is no known completion amount.

Wrong version: version-specific color or modifier classes may be ignored. Confirm the installed CSS version and use matching documentation.
Missing wrapper: a bare .progress-bar may not receive the expected track layout. Keep it inside .progress.
Width and value disagree: a bar that looks 40 percent full but announces 80 percent is misleading. Update both values together.
No accessible name: provide a meaningful label, especially when nearby text does not identify what the bar measures.
Text is hard to read: a percentage inside a narrow bar may be clipped or crowded. Consider placing the label outside the bar or using a short label that remains legible.

One common misconception is that setting aria-valuenow fills the bar. It does not: the visual fill comes from CSS width, while the ARIA value describes the current amount to assistive technology. Both need to be correct.

Frequently Asked Questions

Does Bootstrap 5 still use the .progress class?
Yes. Bootstrap 5 uses .progress for the track and .progress-bar for the filled element. Follow Bootstrap 5’s accessibility guidance for labeling and values.

What is the correct Bootstrap progress bar width syntax?
Set a percentage width on the inner bar, such as style="width: 60%;". The percentage controls the visible fill relative to the track.

Why is my progress bar not styled?
Check that the relevant Bootstrap stylesheet is loaded, that the class names match its version, and that the bar is nested inside a .progress container. Also check for custom CSS overriding Bootstrap.

Should I use aria-valuenow on a progress bar?
For a determinate bar, provide the current value along with minimum and maximum values, and give the progress indicator an accessible name. Keep those values synchronized with the visual width.

Can I put text inside a Bootstrap progress bar?
Yes. A short percentage or status can be placed inside the bar, but ensure it remains readable at small widths. If it does not fit, show the text outside the filled area.

Which class makes a Bootstrap bar striped?
Bootstrap 5 uses .progress-bar-striped on the inner bar. Check the documentation for your installed version before using modifiers, since class availability and conventions vary.

Method: the standard formula for this calculation, rounded as each result states. See how the calculators work or report an error.