Tutorial on How to Create Bootstrap 3 Progress Bars

Bootstrap 3 Progress Bars are the predefined attractive element of bootstrap, A progress bar is mainly used to show how many presents of a task is completed graphically.

Normal Progress Bar

A normal progress bar is a blue background colored bar and to use any progress bar take a div and give the class name .progress and inside that take another div with the class name .progress-bar

Example:

Try it yourself

70% Complete

Progress Bar With a Label

To give a label in a progress bar write ant text inside the dive with the class name .progress-bar

Example:

 

Try it yourself

70%

Progress Bar With color

 

Try it yourself

In bootstrap 3 there is 5 different colored progress bar and they are

  • Deep Blue background or default progress bar (described above)
  • Green background or Success progress bar
  • Sky blue background or Info progress bar
  • Yellow background or warning progress bar
  • Red background or Danger progress bar

Green background or Success progress bar

To make a Green background or Success progress bar use class name .progress-bar-success

Example:

 

Try it yourself

40% success

Sky blue background or Info progress bar

To make a Sky blue background or Info progress bar use class name .progress-bar-info

Example:

 

Try it yourself

50% info

Yellow background or warning progress bar

To make a Yellow background or warning progress bar use class name .progress-bar-warning

Example:

 

Try it yourself

60% warning

Red background or Danger progress bar

To make a Red background or Danger progress bar use class name .progress-bar-danger

Example:

 

Try it yourself

70% danger

Progress Bar With Striped

to make a striped progress bar use class name .progress-bar-striped with its classes

Example:

 

Try it yourself

40% success striped

Progress Bar With Animation

to make an animated progress bar use class name .avtive with its classes

Example:

 

Try it yourself

40%

Progress Bar With Multiple Color

To make a multi-colored progress bar take multiple div with the class name .progress-bar and give the class name for relevant colored progress bar inside a parent dive with the class name .progress

Example:

 

Try it yourself

Free Space
Warning
Danger

I hope the tutorial Bootstrap 3 Progress Bars helped you, and please provide your comment to make the site better and more useful.

Thanks for Reading

Share The Post On -

Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

We have detected that you are using extensions to block ads. Please support us by disabling these ads blocker.