Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD

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.
bootstrap progress bar example

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.
bootstrap progress bar with percentage

<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.
bootstrap progress bar text cut off

<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.
bootstrap progress bar striped

<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
bootstrap progress bar color change

<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 
bootstrap striped progress bar color change

<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.
bootstrap stacked progress bar

<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

bootstrap tutorial for beginners

No comments:

Post a Comment

If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.