Bootstrap Progress Bars

Basic Progress Bar

A progress bar can be used to show a user how far along he/she is in a process.

Bootstrap provides several types of progress bars.

A default progress bar in Bootstrap looks like this:

To create a default progress bar, add a .progress class to a <div> element:

	Note: Progress bars are not supported in Internet Explorer 9 and earlier (because they use CSS3 transitions and animations to achieve some of their effects). Note: To help improve accessibility for people using screen readers, you should include the aria-* attributes.

Progress Bar With Label

A progress bar with a label looks like this:

Remove the .sr-only class from the progress bar to show a visible percentage:

Colored Progress Bars

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

The following example shows how to create progress bars with the different contextual classes:

Striped Progress Bars

Progress bars can also be striped:

Add class .progress-bar-striped to add stripes to the progress bars:

Animated Progress Bar

Here is an "animated" progress bar:

Add class .active to animate the progress bar:

Stacked Progress Bars

Progress bars can also be stacked:

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

Test Yourself with Exercises!

Exercise 1 »  Exercise 2 »  Exercise 3 »  Exercise 4 »