Welcome to Findnerd. Today we are going to learn the progressbar building with the help of bootstrap. We all knows the bootstrap uses different classes for different purposes so we will use the class named progress-bar, progress. Please have a look.

<div class="progress">

    <div class="progress-bar" style="width: 40%;">

        40 percent

    </div>

</div>

It will show the currently process status on status bar. To show the striped progress bar then add the class progress-striped like this

<div class="progress progress-striped">

        <div class="progress-bar" style="width: 40%;">

            40 percent

        </div>

    </div>

You can show the multiples colors in one progress bar with this code

<div class="progress">

    <div class="progress-bar progress-bar-success" style="width: 30%">

        <span class="sr-only">Main disk (40%)</span>

    </div>

    <div class="progress-bar progress-bar-warning" style="width: 45%">

        <span class="sr-only">Secondary disk (25%)</span>

    </div>

    <div class="progress-bar progress-bar-danger" style="width: 15%">

        <span class="sr-only">Random disk (15%)</span>

    </div>

</div>

It will show the progress bar for different targets.