Bootstrap 5 Progress Labels

Bootstrap 5 Progress Labels are used to display the progress of a process on a computer. It displays how much of the process is completed and how much is left. You can add a progress label on a web page using predefined bootstrap classes. Bootstrap provides many types of progress labels.

Bootstrap 5 Progress Labels Class: There is no such pre-defined class for Progress Labels, although, the label can be included by adding the label with the declaring the progress-bar class.

Syntax:

<div class="progress">
 <div class="progress-bar">Progress Labels</div>
</div>

Below examples illustrate the Bootstrap 5 Progress Labels. Example 1: The following example demonstrates the use of Progress Labels in Bootstrap 5.

Output:

👁 Image

Example 2: This is another example that demonstrates the use of multiple colored Progress Labels in Bootstrap 5.

Output:

👁 Image

Reference: https://getbootstrap.com/docs/5.2/components/progress/#labels