Bootstrap Progress bar

Different styles of bootstrap progress bar code

HTML

<div class="bg-white mb-4">
<div class="progress">
<div class="progress-bar" style="width:70%"></div>
</div> 
</div>
<div class="bg-white mb-4"> 
<div class="progress">
<div class="progress-bar bg-success" style="width:70%">70%</div>
</div>
</div>
<div class="bg-white mb-4">  
<!-- Turquoise -->
<div class="progress">
<div class="progress-bar bg-info" style="width:30%"></div>
</div>
</div>
<div class="bg-white mb-4"> 
<!-- Orange -->
<div class="progress">
<div class="progress-bar bg-warning" style="width:40%"></div>
</div>
</div>
<div class="bg-white mb-4"> 
<!-- Orange -->
<div class="progress">
<div class="progress-bar bg-danger progress-bar-striped" style="width:40%"></div>
</div>
</div>
<div class="bg-white mb-4"> 
<!-- Orange -->
<div class="progress">
<div class="progress-bar bg-warning progress-bar-striped progress-bar-animated" style="width:98%">98%</div>
</div>
</div>	
<div class="bg-white mb-4"> 
<!-- Orange -->
<div class="progress">
<div class="progress-bar bg-success" style="width:40%">
Free Space
</div>
<div class="progress-bar bg-warning" style="width:10%">
Warning
</div>
<div class="progress-bar bg-danger" style="width:20%">
Danger
</div>
</div>
</div>

CSS

Bootstrap CSS