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-stripedto 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-infoto 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-infoto 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-infoto 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-verticalto 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-verticalto 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-verticalto 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-verticalto 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-animatedto 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>