Progressbar
Default Progress bars
Default progress bar style
<div class="progress">
<div class="progress-bar bg-danger" style="width: 60%; height:6px;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>Striped Progress bar
add .progress-bar-striped to change the style
<div class="progress">
<div class="progress-bar bg-info progress-bar-striped" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 85%; height:10px;" role="progressbar">
<span class="sr-only">85% Complete (success)</span>
</div>
</div>Colored Progress bar
add bg-primary, .bg-danger, .bg-info to change the style
<div class="progress mt-3">
<div class="progress-bar bg-danger" style="width: 60%; height:6px;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress mt-3">
<div class="progress-bar bg-info" style="width: 40%; height:6px;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress mt-3">
<div class="progress-bar bg-success" style="width: 20%; height:6px;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress mt-3">
<div class="progress-bar bg-primary" style="width: 30%; height:6px;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress mt-3">
<div class="progress-bar bg-warning" style="width: 80%; height:6px;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress mt-3">
<div class="progress-bar bg-inverse" style="width: 40%; height:6px;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>Different bar sizes
add bg-primary, .bg-danger, .bg-info to change the style
<div class="progress mt-3">
<div class="progress-bar bg-danger" style="width: 60%; height:6px;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress mt-3">
<div class="progress-bar bg-info" style="width: 40%; height:8px;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress mt-3">
<div class="progress-bar bg-success" style="width: 20%; height:10px;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress mt-3">
<div class="progress-bar bg-primary" style="width: 30%; height:12px;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress mt-3">
<div class="progress-bar bg-warning" style="width: 80%; height:14px;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>Animated Striped bar
add bg-primary, .bg-danger, .bg-info to change the style