Use our custom progress component for displaying simple or complex progress bars. Progress components are built with two HTML elements, some CSS to set the width, and a few attributes.
- We use the
.progress as a wrapper to indicate the max value of the progress bar.
- We use the inner
.progress-bar to indicate the progress so far.
.progress-bar requires an inline style, utility class, or custom CSS to set their width.
.progress-bar also requires some
aria attributes to make it accessible.
Learn more about Bootstrap progress bars by Clicking here
. Put that all together, and you have the following examples.