Progress Bar Through BootStrap

This blog is to teach you all my reader to create a progress through a BootStrap.In this tutorial i will teach you to make different type of progress bar which will you all be able to make through my BootStrap after reading my tutorial .

For this tutorial you should have a basic knowledge of css ,javascript and Html.It is not necessary that you should be master in css,javaScript and html. But really be sure that after reading this tutorial you are going to do a work which will make you feel like master of css and javascript .


There will be question in your mind what the heck is this BootStrap ? Don't worry your question will be soon answered.

What is BootStrap ?

I will give a short explanation of BootStrap and in detail i will be going in my next tutorial.
Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first web sites. Bootstrap, originally named Twitter Blueprint, was developed by Mark Otto and Jacob Thornton at Twitter as a framework to encourage consistency across internal tools. Before Bootstrap, various libraries were used for interface development, which led to inconsistencies and a high maintenance burden.

Default progress bar look like this .

70% Complete

Let's get suit up for the main topic for which i have set lot of background .For making progress bar for your website . You must know the css class that you should add in your <div class=" class_name"> </div> tag .Their are two type of progress bar which are listed below.

1. Colored Progress Bars
2. Stripped Progress Bars

First of all i will talk about coloured progress bar.They have many class depending on the color used.

1. .progress-bar-success
2. .progress-bar-info
3. .progress-bar-warning
4. .progress-bar-danger

To use this classes apply class .progress-bar followed by any of this class .progress-bar-success Example class="progress-bar progress-bar-success" Below is the result for various type of progress bar shown below.

70% Complete (success example)

60% Complete (info example)

40% Complete (warning example)

50% Complete (danger example)

Code for the above result is below . Example

<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="70"
  aria-valuemin="0" aria-valuemax="100" style="width:70%">
    70% Complete (success example)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60"
  aria-valuemin="0" aria-valuemax="100" style="width:60%">
    60% Complete (info example)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="40"
  aria-valuemin="0" aria-valuemax="100" style="width:40%">
    40% Complete (warning example)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="50"
  aria-valuemin="0" aria-valuemax="100" style="width:50%">
    50% Complete (danger example)
  </div>
</div>

Striped Progress Bar

Bellow are the Example for Striped progress Bar.

70% Complete (success example)

60% Complete (info example)

40% Complete (warning example)

50% Complete (danger example)

For getting the above result we have to add a class class="progress-bar progress-bar-success" followed by "progress-bar-striped" Example class="progress-bar progress-bar-success progress-bar-striped

Code for the Striped-progress-bar is given below

<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="70"
  aria-valuemin="0" aria-valuemax="100" style="width:70%">
    70% Complete (success example)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="60"
  aria-valuemin="0" aria-valuemax="100" style="width:60%">
    60% Complete (info example)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="40"
  aria-valuemin="0" aria-valuemax="100" style="width:40%">
    40% Complete (warning example)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="50"
  aria-valuemin="0" aria-valuemax="100" style="width:50%">
    50% Complete (danger example)
  </div>
</div>

NOW, Animated progress bar .

For the Animated progress bar we have to add one more class i.e .active.
Example class="progress-bar progress-bar-striped active"

60%(animated progress bar)

Code for above Animated progress bar is

<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar"
  aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%">
    60% (Animated progress bar )
  </div>
</div>