Bootstrap Progress Bar
Bootstrap progress bar is used to show the progress of a process. To use a progress bar you have to use .progress class inside a <div> tag.
Example:
<div class="progress">
<div class="progress-bar" role ="progressbar" aria-valuenow ="60" aria-valuemin ="0" aria-valuemax ="100"
style ="width:80%">
<span class="sr-only"> 80% progress bar </span>
</div>
</div>
<div class="progress-bar" role ="progressbar" aria-valuenow ="60" aria-valuemin ="0" aria-valuemax ="100"
style ="width:80%">
<span class="sr-only"> 80% progress bar </span>
</div>
</div>
Run Example
By removing .sr-only class you can display a visible percentage.
Example:
<div class="progress">
<div class="progress-bar" role ="progressbar" aria-valuenow ="60" aria-valuemin ="0" aria-valuemax ="100"
style ="width:80%">
80%
</div>
</div>
<div class="progress-bar" role ="progressbar" aria-valuenow ="60" aria-valuemin ="0" aria-valuemax ="100"
style ="width:80%">
80%
</div>
</div>
Run Example
Contextual Classes with Progress Bar
The contextual classes that can be used in progress bars are:
- progress-bar-success
- progress-bar-info
- progress-bar-warning
- progress-bar-danger
Example:
<div class="progress">
<div class="progress-bar progress-bar-success" role ="progressbar" aria-valuenow ="60" aria-valuemin ="0"
aria-valuemax ="100" style ="width:80%">
80%
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role ="progressbar" aria-valuenow ="60" aria-valuemin ="0"
aria-valuemax ="100" style ="width:70%">
70%
</div>
</div>
<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%
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" role ="progressbar" aria-valuenow ="60" aria-valuemin ="0"
aria-valuemax ="100" style ="width:50%">
50%
</div>
</div>
<div class="progress-bar progress-bar-success" role ="progressbar" aria-valuenow ="60" aria-valuemin ="0"
aria-valuemax ="100" style ="width:80%">
80%
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role ="progressbar" aria-valuenow ="60" aria-valuemin ="0"
aria-valuemax ="100" style ="width:70%">
70%
</div>
</div>
<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%
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" role ="progressbar" aria-valuenow ="60" aria-valuemin ="0"
aria-valuemax ="100" style ="width:50%">
50%
</div>
</div>
Run Example
Striped Progress Bar
To use striped progress bar use .progress-bar-striped class.
Example:
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped" role ="progressbar" aria-valuenow ="60"
aria-valuemin ="0" aria-valuemax ="100" style ="width:80%">
80%
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped" role ="progressbar" aria-valuenow ="60"
aria-valuemin ="0" aria-valuemax ="100" style ="width:70%">
70%
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning progress-bar-striped" role ="progressbar" aria-valuenow ="60"
aria-valuemin ="0" aria-valuemax ="100" style ="width:60%">
60%
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-danger" role ="progressbar" aria-valuenow ="60"
aria-valuemin ="0" aria-valuemax ="100" style ="width:50%">
50%
</div>
</div>
<div class="progress-bar progress-bar-success progress-bar-striped" role ="progressbar" aria-valuenow ="60"
aria-valuemin ="0" aria-valuemax ="100" style ="width:80%">
80%
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped" role ="progressbar" aria-valuenow ="60"
aria-valuemin ="0" aria-valuemax ="100" style ="width:70%">
70%
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning progress-bar-striped" role ="progressbar" aria-valuenow ="60"
aria-valuemin ="0" aria-valuemax ="100" style ="width:60%">
60%
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-danger" role ="progressbar" aria-valuenow ="60"
aria-valuemin ="0" aria-valuemax ="100" style ="width:50%">
50%
</div>
</div>
Run Example
Animated Progress Bar
To use animated progress bar use .active class.
Example:
<div class="progress">
<div class="progress-bar progress-bar-striped active" role ="progressbar" aria-valuenow ="60" aria-valuemin ="0"
aria-valuemax ="100" style ="width:80%">
80%
</div>
</div>
<div class="progress-bar progress-bar-striped active" role ="progressbar" aria-valuenow ="60" aria-valuemin ="0"
aria-valuemax ="100" style ="width:80%">
80%
</div>
</div>
Run Example