Defines different styles for progress bars.


The progress bar consists of a background bar and the progress bar itself, indicating the increase.

Class Description
.progress This class is used on the parent container to create the background of the progress bar.
.progress-bar This class needs to be added to the child element to create the actual progress bar.

Size modifiers

Add the .progress-mini or .progress-small class to change the size of the bar.

Color modifiers

To apply different colors to your progress bars, just add the .progress-success , .progress-warning or .progress-danger class.


To create a striped progress bar, use the .striped class.

You can even animate the striped bar. To do so, just add the .active class.


All modifiers of the Progress component can be combined with each other.