Bootstrap Progress Bar

The Bootstrap progress bar is the easiest way of creating a progress bar using its classes. You can create different types of Bootstrap progress bar in just a few seconds with the addition of few classes.

Here is the example of simple example:-

Output

60% Complete (Success)

Learn each class and find how to create a progress bar using Bootstrap.

Simple Bootstrap Progress Bar

Create a simple progress bar to show users completion of the process, the progress of the required task and submission of the final result, etc.

To create a progress bar, use <div> tag with class .progress and inside it use another div tag with class .progress-bar.

The div tag with class .progress-bar contains the attributes aria-valuenow to show the current value, aria-valuemin to show minimum value, aria-valuemax to show the maximum value and style with the width property and its value as the current value in percentage.

See the example below to understand how to create a progress bar using bootstrap.

Output

60% Complete

Progress Bar With Labels

To show labels with the progress bar, remove the <span> tag and leave its value as it is. This will be the label of the progress bar which you can display to specify the current position value of the progress bar.

Output

60%

The below example showing the two progress bar with the different labels with them.

Output

2%

6%

The above example showing the first progress bar with the label 2% and a second progress bar with the label 6%.

Contextual Classes in Progress Bar

The bootstrap progress bar provides contextual classes to display the progress bars in different background colors in different situations.

Below are the contextual classes with its description.

Class Name	Description
.progress-bar-success	Used to specify success progress bar and completion of the process.
.progress-bar-info	Display progress bar for information progress and completion.
.progress-bar-warning	Specify this to display the warning in the progress bar.
.progress-bar-danger	Show errors during the completion of the process using the progress bar.

To create a progress bar using the contextual classes, you just need to add one of the above given classes in the table with the class .progress-bar.

See the example below to create different progress bars using contextual classes.

Output

60% Complete (Success)

40% Complete (Info)

20% Complete (Warning)

30% Complete (Error)

The above given example showing different size progress bars with different colors using the bootstrap progress bar contextual classes.

Striped Progress Bar

A striped progress bar showing the progress bar with many strips as given in the example below. You can create striped progress bar by adding the .progress-bar-striped with the class .progress-bar.

In addition to this, you also add contextual classes to create different colored striped progress bar as given in the example below.

Output

60% Complete (Success)

40% Complete (Info)

20% Complete (Warning)

30% Complete (Error)

The above example showing the four striped progress bars using the different contextual classes for each bar.

Animated Progress Bar

You can easily display animated bootstrap progress bar by adding the class .active. Add the class to the bar you want to make animated.

This is the fastest way provided by bootstrap to create progress bars in few seconds.

Output

60% Complete (Success)

40% Complete (Info)

20% Complete (Warning)

30% Complete (Error)

The above example contains the animated progress bars with the contextual classes to display different types of progress bars.

Stacked(Multiple in the Same Line) Progress Bar

If you want to put multiple progress bars in the same line, you have to add multiple <div> with class .progress-bar inside the another <div> with class .progress.