Bootstrap 4 Components

Progress

BootStrap progress component allows to you display progress bars which you can stack, animate and put text labels in.

To create a simple progress bar use a wrapper class .progress to indicate the maximum value of the progress bar. Now to show the progress in the progress bar we use another class .progress-bar.

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

The role and aria attributes to the .progress-bar make it accessible to assistive technologies.

To set the width of the progress we have used inline style but we can also use custom css or utility classes.

<div class="progress"> <div class="progress-bar w-25" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div> </div>

You can stack progress bars on top of another.

<div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress mt-2"> <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress mt-2"> <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress mt-2"> <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress mt-2"> <div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div> </div>

Styling the Progress Bar

Label

You do not need a particular class for labeling the progress bar. Just add the text within the .progress-bar.

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

Color

Add background utility .bg-* classes to .progress-bar to style it in different colors.

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

Height

Customize the height of your progress bar by setting a value to height within .style in the .progress-bar.

<div class="progress"> <div class="progress-bar" role="progressbar" style="width: 25%; height: 20px" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">Loading: 25%</div> </div>

Multiple Bars

You can include multiple progress bar within one single progress. The progress bars shows progress one after the other.

<div class="progress"> <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div> <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div> <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div> </div>

Striped Progress Bars

You can style progress bars with stripe using .progress-bar-striped within .progress-bar. You can use .bg-* background utility classes to color the striped progress bar.

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

Animated Stripes

You can add animated stripes that move to the left using .progress-bar-animated in .progress-bar.

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