Bootstrap Progress Bars, Basic Progress Bar, Default Progress Bar, Progress Bar Height, Progress Bar Labels, Text inside Progress Bar, Colored Progress Bars, Striped Progress Bars, Animated Progress Bar, Multiple Progress Bars

Bootstrap Progress Bars

Bootstrap provides displaying progress bar for your website. Basically progress bar used to provide feedback from users. Users can visualize instantly how much is complete and how much left. You can use Bootstrap progress bar for different type.

Basic or Default Progress Bar

To use basic or default progress bar just add Bootstrap class .progress in <div> and set the width property by using style="width:50%"

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

your basic progress bar will look like this.

Progress Bar Height

You can change progress bar height according your uses. Default progress bar height is 16px you can make it 20px or 25px.

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

Progress Bar Labels | Text inside Progress Bar.

You can add text inside your progress bar to show your progress bar %. To show % inside progress bar just add text between <div>

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

Colored Progress Bars

Bootstrap provide different color progress bar also by adding some Bootstrap classes.

Example:- 
<div class="progress">
    <div class="progress-bar" style="width:10%"></div>
  </div><br>

  <!-- Green -->
  <div class="progress">
    <div class="progress-bar bg-success" style="width:20%"></div>
  </div><br>

  <!-- Turquoise -->
  <div class="progress">
    <div class="progress-bar bg-info" style="width:30%"></div>
  </div><br>

  <!-- Orange -->
  <div class="progress">
     <div class="progress-bar bg-warning" style="width:40%"></div>
  </div><br>

  <!-- Red -->
  <div class="progress">
    <div class="progress-bar bg-danger" style="width:50%"></div>
  </div><br>

  <!-- White -->
  <div class="progress border">
    <div class="progress-bar bg-white" style="width:60%"></div>
  </div><br>

  <!-- Grey -->
  <div class="progress">
    <div class="progress-bar bg-secondary" style="width:70%"></div>
  </div><br>

  <!-- Light Grey -->
  <div class="progress border">
    <div class="progress-bar bg-light" style="width:80%"></div>
  </div><br>

  <!-- Dark Grey -->
  <div class="progress">
    <div class="progress-bar bg-dark" style="width:90%"></div>
  </div>

Striped Progress Bars

.progress-bar-striped class provide striped progress bar.

Example:- 
<div class="progress">
    <div class="progress-bar progress-bar-striped" style="width:50%"></div>
  </div>
  <br>
  <div class="progress">
    <div class="progress-bar bg-success progress-bar-striped" style="width:70%"></div>
  </div>

Animated Progress Bar

Bootstrap provide animated progress bar to make more attractive. To use animated progress bar use Bootstrap class .progress-bar-animated.

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

Multiple Progress Bars

You can use multiple progress bar in single bar.

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