Bootstrap Progress Bar: Bootstrap 5 Guide with Examples

A Bootstrap progress bar shows how far along something is: an upload, a multi-step form, a goal, or a storage quota. It is pure CSS, so it needs no JavaScript to display, and only a line of script to update. This guide covers the markup (which changed in Bootstrap 5.3), labels, height, colors, striped and animated bars, stacked bars, and how to update a bar from JavaScript.

A progress bar

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

The outer .progress is the track, and the inner .progress-bar is the filled part. Its width sets how full the bar is. The role and aria-* attributes tell screen readers the value, and aria-label says what is progressing.

Changed in Bootstrap 5.3: the role="progressbar" and aria-* attributes now go on the outer .progress, not on .progress-bar as in earlier versions. If you copy older examples, move them.

Labels

Put text inside the bar to show the value:

<div class="progress" role="progressbar" aria-label="Profile completion"
  aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar" style="width: 75%">75%</div>
</div>

A label inside a short bar gets cut off. For small values, put the label outside, next to or above the bar:

<div class="d-flex justify-content-between small mb-1">
  <span>Storage</span><span>1.2 GB of 5 GB</span>
</div>
<div class="progress" role="progressbar" aria-label="Storage used"
  aria-valuenow="24" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar" style="width: 24%"></div>
</div>

Height

The default height is 1rem. Set a different one on the outer .progress:

<div class="progress" style="height: 4px" role="progressbar" aria-label="Reading progress"
  aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar" style="width: 40%"></div>
</div>

The inner bar fills the height automatically.

Colors

Add a background utility to the inner bar:

<div class="progress" role="progressbar" aria-label="Tests passed"
  aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar bg-success" style="width: 90%">90%</div>
</div>

On light colors such as bg-warning and bg-info, white label text is hard to read. Use text-bg-warning instead, which sets a matching text color:

<div class="progress-bar text-bg-warning" style="width: 50%">50%</div>

The bar’s default color follows $primary, so changing the primary color restyles it. To change only the bar, set --bs-progress-bar-bg on .progress.

Striped and animated

<div class="progress" role="progressbar" aria-label="Processing"
  aria-valuenow="65" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 65%"></div>
</div>

progress-bar-striped adds diagonal stripes, and progress-bar-animated moves them, which suits work that is still running. When a visitor has turned on “reduce motion”, Bootstrap stops the animation.

For work with no known end, a full-width animated striped bar works as an “in progress” indicator, though a spinner is often clearer.

Stacked bars

To show several parts in one bar, such as storage used by type, wrap separate progress bars in .progress-stacked (Bootstrap 5.3). Each segment is its own .progress with its own width and label:

<div class="progress-stacked">
  <div class="progress" role="progressbar" aria-label="Photos" aria-valuenow="30"
    aria-valuemin="0" aria-valuemax="100" style="width: 30%">
    <div class="progress-bar">Photos</div>
  </div>
  <div class="progress" role="progressbar" aria-label="Video" aria-valuenow="25"
    aria-valuemin="0" aria-valuemax="100" style="width: 25%">
    <div class="progress-bar bg-success">Video</div>
  </div>
  <div class="progress" role="progressbar" aria-label="Documents" aria-valuenow="15"
    aria-valuemin="0" aria-valuemax="100" style="width: 15%">
    <div class="progress-bar text-bg-warning">Docs</div>
  </div>
</div>

In the stacked version, the width goes on each .progress segment, not on the inner bar.

Update a progress bar with JavaScript

Change the width and the aria-valuenow together, so screen readers hear the same value sighted users see:

function setProgress(el, value) {
  el.setAttribute('aria-valuenow', value)
  const bar = el.querySelector('.progress-bar')
  bar.style.width = value + '%'
  bar.textContent = value + '%'
}

setProgress(document.querySelector('#upload-progress'), 80)

The bar animates to the new width with a short CSS transition. For a file upload, call it from the upload’s progress event with Math.round(event.loaded / event.total * 100).

A step progress bar for a multi-step form

<p class="small text-body-secondary mb-1">Step 2 of 4: Shipping</p>
<div class="progress" style="height: 6px" role="progressbar" aria-label="Checkout progress"
  aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar" style="width: 50%"></div>
</div>

Say the step in text as well as with the bar, so the progress is clear without relying on the bar alone.

Customize with Sass

Set them before importing Bootstrap; see Bootstrap Sass variables explained.

FAQ

How do I make a progress bar in Bootstrap 5?

Add <div class="progress" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"><div class="progress-bar" style="width: 60%"></div></div>. The inner bar’s width sets how full it is. In Bootstrap 5.3 the role and aria attributes go on the outer .progress.

How do I change the height of a Bootstrap progress bar?

Set a height on the outer .progress element, for example style="height: 6px". The inner bar fills it automatically. The default height is 1rem.

How do I change the color of a Bootstrap progress bar?

Add a background utility such as bg-success or bg-danger to the .progress-bar. On light colors, use text-bg-warning or text-bg-info so the label stays readable.

How do I update a Bootstrap progress bar with JavaScript?

Set the inner bar’s style.width to the new percentage and update aria-valuenow on the outer .progress to the same number. The bar animates to the new width.

How do I make a stacked progress bar in Bootstrap 5.3?

Wrap several .progress elements in a .progress-stacked container, set each segment’s width on its .progress, and give each inner .progress-bar its own color.