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:

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

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">:

<div class="">
  <div class=""
    role="progressbar"
    style="width:70%">
  </div>
</div>