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
.
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
Label
You do not need a particular class for labeling the progress bar. Just add the text within the .progress-bar
.
Color
Add background utility .bg-*
classes to .progress-bar
to style it in different colors.
Height
Customize the height of your progress bar by setting a value to height within .style
in the .progress-bar.
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.