Bootstrap4 Progress Bar

Progress bars can display the completion process of user tasks.

The steps to create a basic progress bar are as follows:

• Add a <div> with the class .progress.
• Next, inside the above <div>, add an empty <div> with the class .progress-bar.
• Add a style attribute with a percentage-based width, such as style="width:70%" to indicate the progress bar at 70% position.

Example

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

Progress Bar Height

The default height of the progress bar is 16px. We can modify it using the CSS height property:

Example

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

Progress Bar Labels

Text, such as the percentage of progress, can be added inside the progress bar:

Example

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

Different Colored Progress Bars

By default, the progress bar is blue. Bootstrap4 also provides progress bars in the following colors:

Example

<div class="progress">
  <div class="progress-bar bg-success" style="width:40%"></div>
</div>

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

<div class="progress">
  <div class="progress-bar bg-warning" style="width:60%"></div>
</div>

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

Striped Progress Bars

Use the .progress-bar-striped class to set striped progress bars:

Example

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

Animated Progress Bars

Use the .progress-bar-animated class to add animation to the progress bar:

Example

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

Mixed Color Progress Bars

Progress bars can be set with multiple colors:

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>