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