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
<div class="progress mt-3">
<div class="progress-bar active progress-bar-striped 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 active progress-bar-striped" 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 active progress-bar-striped" 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 active progress-bar-striped" 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 active progress-bar-striped" style="width: 80%; height:14px;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>Vertical Progress bars
add .progress-vertical to change the style
<div class="progress progress-vertical">
<div class="progress-bar bg-danger" style="width:4px; height:60%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress progress-vertical">
<div class="progress-bar bg-info" style="width:4px; height:80%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress progress-vertical">
<div class="progress-bar bg-success" style="width:4px; height:60%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress progress-vertical">
<div class="progress-bar bg-primary" style="width:4px; height:40%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress progress-vertical">
<div class="progress-bar bg-warning" style="width:4px; height:30%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
Vertical Progress From bottom
add .progress-vertical to change the style
<div class="progress progress-vertical-bottom">
<div class="progress-bar bg-danger" style="width:4px; height:60%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress progress-vertical-bottom">
<div class="progress-bar bg-info" style="width:4px; height:80%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress progress-vertical-bottom">
<div class="progress-bar bg-success" style="width:4px; height:60%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress progress-vertical-bottom">
<div class="progress-bar bg-primary" style="width:4px; height:40%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress progress-vertical-bottom">
<div class="progress-bar bg-warning" style="width:4px; height:30%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>Different size Progress bars
add .progress-vertical to change the style
<div class="progress progress-vertical">
<div class="progress-bar bg-danger" style="width:4px; height:60%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress progress-vertical">
<div class="progress-bar bg-info" style="width:6px; height:80%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress progress-vertical">
<div class="progress-bar bg-success" style="width:8px; height:60%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress progress-vertical">
<div class="progress-bar bg-primary" style="width:10px; height:40%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress progress-vertical">
<div class="progress-bar bg-warning" style="width:14px; height:30%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>Animated bars
add .progress-vertical to change the style
<div class="progress mt-3">
<div class="progress-bar bg-danger progress-animated" 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 progress-animated" 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 progress-animated" 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 progress-animated" 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 progress-animated" 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 progress-animated" style="width: 40%; height:6px;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
SKILL BARS
add .progress-animated to change the style
Photoshop 85%
Code editor 90%
Illustrator 65%
<h6>Photoshop
<span class="pull-end">85%</span>
</h6>
<div class="progress ">
<div class="progress-bar bg-danger progress-animated" style="width: 85%; height:6px;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<h6 class="mt-4">Code editor
<span class="pull-end">90%</span>
</h6>
<div class="progress">
<div class="progress-bar bg-info progress-animated" style="width: 90%; height:6px;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<h6 class="mt-4">Illustrator
<span class="pull-end">65%</span>
</h6>
<div class="progress">
<div class="progress-bar bg-success progress-animated" style="width: 65%; height:6px;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>