Bootstrap Progress Bars

tutorial and example
tutorial and example

The bootstrap progress bar is used to show the progress . It provides different types of progress bars.

To create a default progress bar, we can add a .progress class within the <div> element.

Let us see an example of Progress Bars:

Try Now

Note: progress bars are not supported in Internet Explorer 9 and earlier.

Progress Bar With Label

You can use the progress bar with the label. You have to remove the class “sr-only”.

Let us see an example of Bootstrap Progress Bar With Label:

Try Now

Colored Progress Bar

Colored Progress Bar is used to create colored progress bar. By using contextual classes

There are following contextual progress bars classes:

  • .progress-bar-success
  • .progress-bar-info
  • .progress-bar-warning etc.

Let us see an example of Bootstrap Colored Progress Bar:

Try Now

Striped Progress Bars

The striped progress bars class .progress-bar-striped is used to create the striped progress bar.

Let us see an example of Bootstrap Striped Progress Bars:

Try Now

Animated Progress Bar:

We can use animated progress bar by using .active class.

Let us see an example of Bootstrap Striped Progress Bars:

Try Now

Stacked Progress Bars

We can create stacked progress bar by placing multiple bars into the same <div class=”progress”>.

Let us see an example of Bootstrap Striped Progress Bars:

Try Now