Bootstrap progress bars

Suggested Video Tutorials
Part 31 - Bootstrap panels
Part 32 - Bootstrap well
Part 33 - Bootstrap labels and badges



In this video we will discuss the bootstrap progress bar component.



Progress bars are used for showing the progress of tasks such as downloading a file, software installation etc.


To create a progress bar, create 2 nested <div> elements with progress and progress-bar classes as shown below

<div class="progress">

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

    </div>

</div>

To display the completed percentage on the progress bar, include the percentage in the inner div element.

<div class="progress">

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

        70%

    </div>

</div>

To display low percentage values like 0%, 1% etc, make sure to include min-width style on the progress bar.

<div class="progress">

    <div class="progress-bar" style="width:1%; min-width:20px">

        1%

    </div>

</div>

To create stripped progress bar add progress-bar-striped class along with progress-bar class on the inner <div> element.

<div class="progress">

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

        80%

    </div>

</div>

To create progress bars with different colour schemes, use progress bar contextual classes

<div class="progress">

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

        20%

    </div>

</div>

<div class="progress">

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

        40%

    </div>

</div>

<div class="progress">

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

        60%

    </div>

</div>

<div class="progress">

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

        80%

    </div>

</div>

To create striped progress bars with different colour schemes, just add progress-bar-striped class 

<div class="progress">

    <div class="progress-bar progress-bar-success progress-bar-striped" style="width:20%;">

        20%

    </div>

</div>

<div class="progress">

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

        40%

    </div>

</div>

<div class="progress">

    <div class="progress-bar progress-bar-warning progress-bar-striped" style="width:60%;">

        60%

    </div>

</div>

<div class="progress">

    <div class="progress-bar progress-bar-danger progress-bar-striped" style="width:80%;">

        80%

    </div>

</div>

To create animated stripped progress bars just add active class along with progress-bar-striped class

<div class="progress">

    <div class="progress-bar progress-bar-success progress-bar-striped active" style="width:20%;">

        20%

    </div>

</div>

<div class="progress">

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

        40%

    </div>

</div>

<div class="progress">

    <div class="progress-bar progress-bar-warning progress-bar-striped active" style="width:60%;">

        60%

    </div>

</div>

<div class="progress">

    <div class="progress-bar progress-bar-danger progress-bar-striped active" style="width:80%;">

        80%

    </div>

</div>

To create a stacked progress bar, simply place the individual progress bars in a single div with class progress.

<div class="progress">

    <div class="progress-bar progress-bar-success progress-bar-striped active" style="width:25%;">

        Login

    </div>

    <div class="progress-bar progress-bar-info progress-bar-striped active" style="width:25%;">

        Shipping

    </div>

    <div class="progress-bar progress-bar-warning progress-bar-striped active" style="width:25%;">

        Payment

    </div>

</div>

If you do not want the animation remove the active class and if you do not want stripes remove progress-bar-striped class