Basic Progress Bar

A progress bar can be used to show how far a user is in a process.

To create a default progress bar, add a .progress class to a container element and add the .progress-bar class to its child element. Use the CSS width property to set the width of the progress bar:

Progress Bar Height

The height of the progress bar is 1rem (16px) by default. Use the CSS height property to change the height:

Example

  <div class="progress" style="height:10px">
    <div class="progress-bar" style="width:40%;"> </div>
  </div>
  <br>
   <div class="progress" style="height:20px">
  <div class="progress-bar" style="width:50%;"> </div>
  </div>
   <br>
   <div class="progress" style="height:30px">
    <div class="progress-bar" style="width:60%;"> </div>
 </div>
 </div>

You can click on above box to edit the code and run again.

Output

Progress Bar Labels

Add text inside the progress bar to show the visible percentage:

Example

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

You can click on above box to edit the code and run again.

Output

70%

Example

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

You can click on above box to edit the code and run again.

Colored Progress Bars

Example

 <div class="progress">
   <div class="progress-bar" style="width:10%"> </div>
 </div>
 <div class="progress">
   <div class="progress-bar bg-success" style="width:20%"> </div>
 </div>
 <div class="progress">
   <div class="progress-bar bg-info" style="width:30%"> </div>
 </div>
 <div class="progress">
    <div class="progress-bar bg-warning" style="width:40%"> </div>
 </div>
 <div class="progress">
   <div class="progress-bar bg-danger" style="width:50%"> </div>
 </div>
 <div class="progress border">
   <div class="progress-bar bg-white" style="width:60%"> </div>
 </div>
 <div class="progress">
   <div class="progress-bar bg-secondary" style="width:70%"> </div>
 </div>
 <div class="progress border">
   <div class="progress-bar bg-light" style="width:80%"> </div>
 </div>
 <div class="progress">
   <div class="progress-bar bg-dark" style="width:90%"> </div>
 </div>

You can click on above box to edit the code and run again.

Output

Animated Progress Bar

Add the .progress-bar-animated class to animate the progress bar:

Example

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

You can click on above box to edit the code and run again.

Output

Multiple Progress Bars

Progress bars can also be stacked:

Example

 <div class="progress">
   <div class="progress-bar bg-success" style="width:40%">
    Free Space
   </div>
  <div class="progress-bar bg-warning" style="width:10%">
    Warning
  </div>
  <div class="progress-bar bg-danger" style="width:20%">
    Danger
   </div>
 </div>

You can click on above box to edit the code and run again.

Output


  
    Free Space
  
  
    Warning
  
  
    Danger