Bootstrap Progress Bars

The progress bar shows how far a user is in a process. In Bootstrap, there are several types of progress bars.

Default Progress Bar

To create a basic progress bar −

  • Add a <div> with a class of .progress.

  • Next, inside the above <div>, add an empty <div> with a class of .progress-bar.

  • Add a style attribute with the width expressed as a percentage. Say for example, style = "60%"; indicates that the progress bar was at 60%.

Example -

Bootstrap 4 Basic Progress Bar

Progress bar is used to show a user how far long he/she is in a process. To create create a default progress bar, add a .progress class to a container element and and the progress-bar class to its child element. Use the CSS width property to set the width of the progress bar.

Example -

Bootstrap Progress bar with Label

The progress bar with label specifies the percentage of progress of a specific process.You have to remove the .sr-only class from the progress bar to show a visible percentage.

Example -

Bootstrap Colored Progress bar

Contextual classes are used to provide "meaning through colors". The contextual classes that can be used with progress bars are:

  • .progress-bar-success
  • .progress-bar-info
  • .progress-bar-warning
  • .progress-bar-danger

Example -

Bootstrap Stripped Progress bar

Progress bars can also be striped:

Example -

Animated Progress Bar

Add class .active to animate the progress bar:

Example -

Stacked Progress Bars

Create a stacked progress bar by placing multiple bars into the same <div class="progress">:

Example -