Bootstrap 5 Progress Labels

Last Updated : 30 Nov, 2022

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.

HTML 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, 
                            initial-scale=1">
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" 
          rel="stylesheet">
    <title>Bootstrap Progress label</title>
</head>

<body class="p-3 m-0 border-0 bd-example">
    <center>
        <h1 class="text-success">
             GeeksforGeeks
          </h1>
        <h4>
            Progress label
          </h4>
        <div class="progress">
            <div class="progress-bar w-50">
                 50%
              </div>
        </div>
        <h3>
            Learning Bootstrap Progress Label
          </h3>
    </center>
</body>

</html>

Output:

 

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

HTML 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1">
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" 
          rel="stylesheet">
    <title>Bootstrap 5 Progress Bar</title>
</head>

<body class="p-3 m-0 border-0 bd-example">
    <center>
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <h4>
            Progress Bar
          </h4>
        <div class="progress">
            <div class="progress-bar bg-success" aria-valuenow="0">
                Progress label 0%
            </div>
        </div>
        <div class="progress">
            <div class="progress-bar bg-primary w-25">
                Progress label 25%
              </div>
        </div>
        <div class="progress">
            <div class="progress-bar bg-warning w-50">
                Progress label 50%
              </div>
        </div>
        <div class="progress">
            <div class="progress-bar bg-info w-75">
                Progress label 75%
              </div>
        </div>

        <div class="progress">
            <div class="progress-bar bg-dark w-100">
                Progress label 100%
              </div>
        </div>
        <h3>
            Learning Bootstrap multiple colored progress labels
          </h3>
    </center>
</body>

</html>

Output:

 

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

Comment

Explore