Progress Bar

Basic

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

Striped

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

Animated

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

Stacked

< div class="progress" >
  < div class="bar bar-success" style="width: 35%;" >< /div >
  < div class="bar bar-warning" style="width: 20%;" >< /div >
  < div class="bar bar-danger" style="width: 10%;" >< /div >
< /div >

Additional colors

< div class="progress progress-info" >
  < div class="bar" style="width: 20%" >< /div >
< /div >
< div class="progress progress-success" >
  < div class="bar" style="width: 40%" >< /div >
< /div >
< div class="progress progress-warning" >
  < div class="bar" style="width: 60%" >< /div >
< /div >
< div class="progress progress-danger" >
  < div class="bar" style="width: 80%" >< /div >
< /div >

Striped bars

< div class="progress progress-info progress-striped" >
  < div class="bar" style="width: 20%" >< /div >
< /div >
< div class="progress progress-success progress-striped" >
  < div class="bar" style="width: 40%" >< /div >
< /div >
< div class="progress progress-warning progress-striped" >
  < div class="bar" style="width: 60%" >< /div >
< /div >
< div class="progress progress-danger progress-striped" >
  < div class="bar" style="width: 80%" >< /div >
< /div >