Bootstrap Progress Bars

Bootstrap 5 Progress Bars

Basic Progress Bar

A progress bar can be used to show a user how far along they are in a process. Bootstrap 5 provides a flexible progress bar component.

A default progress bar in Bootstrap 5 looks like this (example: 70% complete):

[Visual representation of a progress bar filled to 70%]

To create a default progress bar, add a .progress class to a <div> element, and a child <div> with class .progress-bar.

<html>
 <head>
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
 </head>
 <body>
  <div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
   <div class="progress-bar" style="width: 70%">
    <span class="visually-hidden">70% Complete</span>
   </div>
  </div>
 </body>
</html>

Note: Bootstrap 5 components are designed for modern browsers. They utilize CSS3 features for effects. Accessibility is enhanced with ARIA attributes.

Progress Bar With Label

To display a visible percentage or label inside the progress bar, simply place the text within the .progress-bar element.

[Visual representation of a progress bar filled to 70% with ‘70%’ text inside]

If you remove the .visually-hidden class (formerly .sr-only) or just add text, it will be visible:

<html>
 <head>
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
 </head>
 <body>
  <div class="progress" role="progressbar" aria-label="Example with label" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
   <div class="progress-bar" style="width: 70%">
    70%
   </div>
  </div>
 </body>
</html>

Colored Progress Bars

Bootstrap provides background color utility classes that can be applied to progress bars for semantic meaning (e.g., success, warning, danger).

Commonly used background classes for progress bars include:

• .bg-success (replaces .progress-bar-success)
• .bg-info (replaces .progress-bar-info)
• .bg-warning (replaces .progress-bar-warning)
• .bg-danger (replaces .progress-bar-danger)

While specific .progress-bar-* color classes were common in older versions, Bootstrap 5 encourages using general background color utilities (.bg-*) for more flexibility.

[Visuals: Green success, blue info, yellow warning, red danger progress bars]

Example using background color utility classes:

<html>
 <head>
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
 </head>
 <body>
  <div class="progress mb-3" role="progressbar" aria-label="Success example" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
   <div class="progress-bar bg-success" style="width: 40%">40% Complete (success)</div>
  </div>
  <div class="progress mb-3" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
   <div class="progress-bar bg-info" style="width: 50%">50% Complete (info)</div>
  </div>
  <div class="progress mb-3" role="progressbar" aria-label="Warning example" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
   <div class="progress-bar bg-warning text-dark" style="width: 60%">60% Complete (warning)</div>
  </div>
  <div class="progress" role="progressbar" aria-label="Danger example" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
   <div class="progress-bar bg-danger" style="width: 70%">70% Complete (danger)</div>
  </div>
 </body>
</html>

Note: For lighter background colors like .bg-warning, you might need to add a contrasting text color utility like .text-dark for readability.

Striped Progress Bars

Progress bars can also have a striped appearance.

[Visuals: Striped versions of the colored progress bars]

Add class .progress-bar-striped to the .progress-bar element to add stripes:

<html>
 <head>
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
 </head>
 <body>
  <div class="progress mb-3" role="progressbar" aria-label="Striped success example" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
   <div class="progress-bar progress-bar-striped bg-success" style="width: 40%">40% Complete</div>
  </div>
  <div class="progress mb-3" role="progressbar" aria-label="Striped info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
   <div class="progress-bar progress-bar-striped bg-info" style="width: 50%">50% Complete</div>
  </div>
 </body>
</html>

Animated Progress Bar

To animate the stripes on a progress bar, add the .progress-bar-animated class to a striped progress bar.

[Visual: A striped progress bar with animating stripes]

Add class .progress-bar-animated (in addition to .progress-bar-striped):

<html>
 <head>
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
 </head>
 <body>
  <div class="progress" role="progressbar" aria-label="Animated striped example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
   <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 75%">
    75%
   </div>
  </div>
 </body>
</html>

Stacked Progress Bars

Progress bars can also be stacked to show multiple segments within a single progress container.

[Visual: A single progress bar container with multiple colored segments, e.g., 30% green, 20% yellow, 15% red]

Create a stacked progress bar by placing multiple .progress-bar elements within the same div.progress:

<html>
 <head>
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
 </head>
 <body>
  <div class="progress" aria-label="Stacked example">
   <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">Free Space</div>
   <div class="progress-bar bg-warning text-dark" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">Warning</div>
   <div class="progress-bar bg-danger" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100">Danger</div>
  </div>
 </body>
</html>