Bootstrap 5 TutorialLesson 15Free preview

BS5 Progress Bars

This lesson is part of Bootstrap · All levels

Summary

The progress bar displays the progress of completion of a task in the form of a colored horizontal bar. The .progress element is the container whereas the .progress-bar in it determines the width by the style width attribute in percent. Add .progress-bar-striped and .progress-bar-animated for the moving linear effect.

Key points

.progress is the container and .progress-bar is the contents.
The width of the progression is set by the style width attribute in percent.
.progress-bar-striped adds the slash effect.
.progress-bar-animated makes the line move and is usually paired with striped.
The color bar uses the utility .bg-* such as .bg-success.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.