Progress Bars

Style 1

 
 
 
 
 

<div class="col-12">
    <div class="progress">
        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="75" class="progress-bar" role="progressbar" style="width: 65%;">&nbsp;</div>
    </div>
</div>
<div class="col-12">
    <div class="progress">
        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="25" class="progress-bar bg-success" role="progressbar" style="width: 20%;">&nbsp;</div>
    </div>
</div>
<div class="col-12">
    <div class="progress">
        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" class="progress-bar bg-info" role="progressbar" style="width: 45%;">&nbsp;</div>
    </div>
</div>
<div class="col-12">
    <div class="progress">
        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="75" class="progress-bar bg-warning" role="progressbar" style="width: 30%;">&nbsp;</div>
    </div>
</div>
<div class="col-12">
    <div class="progress">
        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" class="progress-bar bg-danger" role="progressbar" style="width: 40%;">&nbsp;</div>
    </div>
</div>
 

Style 2

 
 
 
 
 

<div class="col-12">
    <div class="progress">
        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="75" class="progress-bar progress-bar-striped" role="progressbar" style="width: 35%;">&nbsp;</div>
    </div>
</div>
<div class="col-12">
    <div class="progress">
        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="25" class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 30%;">&nbsp;</div>
    </div>
</div>
<div class="col-12">
    <div class="progress">
        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 20%;">&nbsp;</div>
    </div>
</div>
<div class="col-12">
    <div class="progress">
        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="75" class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 40%;">&nbsp;</div>
    </div>
</div>
<div class="col-12">
    <div class="progress">
        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 35%;">&nbsp;</div>
    </div>
</div>