Colored bars
you can create any colors you want
Different bar sizes
you can create any size you want just give height to bar
Animated Striped bar
You can also use animated bar by just putting active
class
<div class="progress mt-4">
<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-4">
<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-4">
<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-4">
<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-4">
<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-4">
<div class="progress-bar bg-inverse" style="width: 40%; height:6px;" role="progressbar"> <span class="sr-only">60% Complete</span> </div>
</div>
<div class="progress mt-4">
<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-4">
<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-4">
<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-4">
<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-4">
<div class="progress-bar bg-warning" style="width: 80%; height:14px;" role="progressbar"> <span class="sr-only">60% Complete</span> </div>
</div>
<div class="progress mt-4">
<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-4">
<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-4">
<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-4">
<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-4">
<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>
Skill Bars
you can create animated skill bar if you want just put wow animated progress-animated
Photoshop85%
Code editor90%
Illustrator65%
Dreamweaver85%
Coral Draw45%
Sketch25%
<!-- SKILL BARS -->
<div class="progress ">
<div class="progress-bar bg-danger wow animated progress-animated" style="width: 85%; height:6px;" role="progressbar"> <span class="sr-only">60% Complete</span> </div>
</div>