Progress Bars

<div class="plain-bar">
    <h3>Plain</h3>

    <div class="progress">
        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="40" class="progress-bar bg-success" role="progressbar"
            style="width:40%">&nbsp;</div>
    </div>

    <div class="progress">
        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" class="progress-bar bg-info" role="progressbar"
            style="width:50%">&nbsp;</div>
    </div>

    <div class="progress">
        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="60" class="progress-bar bg-warning" role="progressbar"
            style="width:60%">&nbsp;</div>
    </div>

    <div class="progress">
        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="70" class="progress-bar bg-danger" role="progressbar"
            style="width:70%">&nbsp;</div>
    </div>
</div>
             

Copy to clipboard

<div class="stripped-bar">
    <h3>Stripped</h3>

    <div class="progress">
        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="40"
            class="progress-bar bg-success progress-bar-striped" role="progressbar" style="width:40%">&nbsp;</div>
    </div>

    <div class="progress">
        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" class="progress-bar bg-info progress-bar-striped"
            role="progressbar" style="width:50%">&nbsp;</div>
    </div>

    <div class="progress">
        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="60"
            class="progress-bar bg-warning progress-bar-striped" role="progressbar" style="width:60%">&nbsp;</div>
    </div>

    <div class="progress">
        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="70"
            class="progress-bar bg-danger progress-bar-striped" role="progressbar" style="width:70%">&nbsp;</div>
    </div>
</div>
             

Copy to clipboard