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