Bootstrap 4 Components


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.

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.

You can stack progress bars on top of another.

Styling the Progress Bar


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

Loading: 25%


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

Loading: 25%


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

Loading: 25%

Multiple Bars

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

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.

Animated Stripes

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