1) Bootstrap Progress Bars

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

In Bootstrap .progress class is used to how far along proces.

Example:-

 <div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="70"
  aria-valuemin="0" aria-valuemax="100" style="width:70%">
    <span class="sr-only">70% Complete</span>
  </div>
  </div>
 

Test it Now

2) Bootstrap Progress Bar With Label

.sr-only class is used to show a visible percentage:

Example:-

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

Test it Now

3) Bootstrap Animated Progress Bar

Use the .active class for animate the progress bar:

Example:-

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

Test it Now

4) Stacked Progress Bars

Multiple progressbars display into the same time.

Example:-

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

Test it Now

Next TopicBootstrap Pagination

← prev next →

Bootstrap 4 Tuto

1) Bootstrap Progress Bars

2) Bootstrap Progress Bar With Label

3) Bootstrap Animated Progress Bar

4) Stacked Progress Bars