Home ยป Bootstrap Progress Bar

Bootstrap Progress Bar

by Online Tutorials Library

Bootstrap Progress Bar

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

The class .progress within a <div> element is used to create a default progress bar in bootstrap.

Bootstrap Progress Bar Example

Test it Now

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.


Test it Now

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.

See this example:

Test it Now

Bootstrap Colored Progress bar

You can use contextual classes to create colored progress bar.

The contextual classes that are used to create colored progress bar:

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

Test it Now

Bootstrap Stripped Progress bar

You can create stripped progress bar by using class .progress-bar-striped .

Test it Now

Bootstrap Animated progress bar

You have to use class .active to create animated progress bar.

Test it Now

Bootstrap Stacked Progress bar (Multi-colored progress bar)

You can create stacked progress bar by placing multiple bars into the same <div class="progress">

Test it Now

Note: Two types of new colored progress bar are added in Bootstrap 4:

  • .progress-bar-white
  • .progress-bar-secondary
  • .progress-bar-light
  • .progress-bar-dark


Test it Now

You may also like