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
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.
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:
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:
Bootstrap Stripped Progress bar
You can create stripped progress bar by using class .progress-bar-striped .
Bootstrap Animated progress bar
You have to use class .active to create animated progress bar.
Bootstrap Stacked Progress bar (Multi-colored progress bar)
You can create stacked progress bar by placing multiple bars into the same <div class="progress">
Note: Two types of new colored progress bar are added in Bootstrap 4: