Bootstrap Progress Bars

Progress Bars

Progress bars visually indicate progress in tasks such as file uploads or form submissions. There are various kinds of progress bars available in Bootstrap.

Below is the default progress bars:

Basic Progress Bar

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

This bar will be filled to 50%.

Important Note: Ensure you specify a width in percentage for visibility.

Progress Bar with Label

To display a visible percentage, remove the .sr-only class from the progress bar:

<div class="progress">
  <div class="progress-bar" style="width:70%">70%</div>
</div>

Output:

Colored Progress Bars

Use contextual classes like .progress-bar-success, .progress-bar-info, .progress-bar-warning, and .progress-bar-danger to change colors.

For example:

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width:40%"></div>
  <div class="progress-bar progress-bar-info" style="width:50%"></div>
  <div class="progress-bar progress-bar-warning" style="width:60%"></div>
  <div class="progress-bar progress-bar-danger" style="width:70%"></div>
</div>

Striped Progress Bars

Add .progress-bar-striped for stripes.

Example:

<div class="progress">
  <div class="progress-bar progress-bar-striped" style="width:60%">60%</div>
</div>

Output:

Animated Progress Bar

Add .active for animation.

For Example:

<div class="progress">
  <div class="progress-bar progress-bar-striped active" style="width:80%"></div>
</div>

Important Note: The .active class was removed in Bootstrap 4. Use CSS animations instead.

Stacked Progress Bars

Progress bars can also be stacked. Put several bars into the same <div class="pro

Request more information

Bootstrap Progress Bars