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

<div class="progress">
	<div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
	  	<span class="sr-only">70% Complete</span>
	</div>
</div>

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

<div class="progress">
	<div class="progress-bar" role="progressbar" aria-valuenow="70"
	  aria-valuemin="0" aria-valuemax="100" style="width:70%">
	    70%
	</div>
</div>

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

<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40"
  aria-valuemin="0" aria-valuemax="100" style="width:40%">
    40% success
  </div>
</div>

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

<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="50"
  aria-valuemin="0" aria-valuemax="100" style="width:50%">
    50% info
  </div>
</div>

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

<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60"
  aria-valuemin="0" aria-valuemax="100" style="width:60%">
    60% warning
  </div>
</div>

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

<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70"
  aria-valuemin="0" aria-valuemax="100" style="width:70%">
    70% danger
  </div>
</div>

Progress Bar With Striped

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

Example:

 

Try it yourself

<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar"
  aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
    40% success striped
  </div>
</div>

Progress Bar With Animation

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

Example:

 

Try it yourself

<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar"
  aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
    40%
  </div>
</div>

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

<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" style="width:40%">
    Free Space
  </div>
  <div class="progress-bar progress-bar-warning" role="progressbar" style="width:10%">
    Warning
  </div>
  <div class="progress-bar progress-bar-danger" role="progressbar" style="width:20%">
    Danger
  </div>
</div>

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