Bootstrap 5 Progress Background

Last Updated : 23 Jul, 2025

The Bootstrap 5 Progress is used to show the progress of a task to the user. A progress bar displays how much your process progressed or is completed and left. We can use background utility classes to change the appearance of progress bars.

Prerequisite: Bootstrap 5 Progress component to create, stack, animate progress bars and place text labels over them.

Bootstrap 5 Progress Backgrounds Class: There is no individual color for this, we can use Bootstrap 5 Background Color classes to color the progress bars.

Syntax:

<div class="progress">
    <div 
        class="progress-bar bg-warning" 
        role="progressbar" 
        style="width: x%" 
        aria-valuenow="..."
        aria-valuemin="..." 
        aria-valuemax="...">
    </div>
</div>

Example 1: In this example, we set different informative background colors for the progress components.

HTML

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

<head>
    <link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
          rel="stylesheet">
    <script src=
"https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js">
    </script>
</head>

<body>
    <div class="container">
        <div class="text-center">
            <h1 class="text-success">GeeksforGeeks</h1>
            <h3> Bootstrap 5 progress background</h3>
        </div>

        <div>

            <div class="progress mb-3 mt-4">
                <div class="progress-bar bg-primary" role="progressbar" 
                     style="width:25%" aria-valuenow="30"
                     aria-valuemin="0" aria-valuemax="100">
                </div>
            </div>
            <div class="progress mb-3 mt-4">
                <div class="progress-bar bg-secondary" role="progressbar" 
                     style="width: 35%" aria-valuenow="30"
                     aria-valuemin="0" aria-valuemax="100">
                </div>
            </div>
            <div class="progress mb-3">
                <div class="progress-bar bg-success" role="progressbar" 
                     style="width: 45%" aria-valuenow="45"
                     aria-valuemin="0" aria-valuemax="100">
                </div>
            </div>
            <div class="progress mb-3 mt-4">
                <div class="progress-bar bg-warning" role="progressbar" 
                     style="width:55%" aria-valuenow="30"
                     aria-valuemin="0" aria-valuemax="100">
                </div>
            </div>
            <div class="progress mb-3">
                <div class="progress-bar bg-info" role="progressbar" 
                     style="width: 65%" aria-valuenow="60"
                     aria-valuemin="0" aria-valuemax="100">
                </div>
            </div>
            <div class="progress mb-3">
                <div class="progress-bar bg-danger" role="progressbar" 
                     style="width: 90%" aria-valuenow="90"
                     aria-valuemin="0" aria-valuemax="100">
                </div>
            </div>
        </div>
    </div>
</body>

</html>

Output:

Example 2: In this example, we set the progress bars with light, dark, transparent, and white colors.

HTML

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

<head>
    <link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
          rel="stylesheet">
    <script src=
"https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js">
    </script>


</head>

<body>
    <div class="container">
        <div class="text-center">
            <h1 class="text-success">GeeksforGeeks</h1>
            <h3>Bootstrap 5 Progress Backgrounds</h3>
        </div>
        <div class="progress mb-3 mt-4">
            <div class="progress-bar bg-light" role="progressbar"
                 style="width: 30%" aria-valuenow="30" aria-valuemin="0" 
                 aria-valuemax="100">
            </div>
        </div>
        <div class="progress mb-3 mt-4">
            <div class="progress-bar bg-dark" role="progressbar" 
                 style="width: 40%" aria-valuenow="40" aria-valuemin="0" 
                 aria-valuemax="100">
            </div>
        </div>
        <div class="progress mb-3">
            <div class="progress-bar bg-white" role="progressbar" 
                 style="width: 50%" aria-valuenow="50" aria-valuemin="0" 
                 aria-valuemax="100">
            </div>
        </div>
        <div class="progress mb-3">
            <div class="progress-bar bg-transparent" role="progressbar" 
                 style="width: 60%" aria-valuenow="60" aria-valuemin="0" 
                 aria-valuemax="100">
            </div>
        </div>
        <div class="progress mb-3">
            <div class="progress-bar bg-body" role="progressbar"
                 style="width: 90%" aria-valuenow="100" aria-valuemin="0" 
                 aria-valuemax="100">
            </div>
        </div>
    </div>
</body>

</html>