How to create a progress bar in different colors in Bootstrap ?

Last Updated : 22 Sep, 2021

Bootstrap 5 is the latest major release by Bootstrap in which they have revamped the UI and made various changes. The progress bar is a pictorial representation that tells about the details of any goal or task i.e. it is used to represent the progress of a task or any operation that displays how much of the process is completed and how much is left. You can add a progress bar on a web page using predefined bootstrap classes. In this article, we will learn how to create a progress bar with a different color using pre-defined Bootstrap classes.

Syntax:

<div class="progress">Contents<div>

Progress bar in bootstrap can be created in different colors. There are two methods to change the color of the progress bar in bootstrap.

Method 1: Using bg-type:

We can add class bg-type in progress div to change its color. There are 8 types of color customization options available in bootstrap5:

bg-primary
bg-secondary
bg-success
bg-danger
bg-warning
bg-info
bg-light
bg-dark

Example: This example illustrates some basic progress bars in different colors. These progress bars signify an emotion through their background colors such as success, danger, and neutrality. To create some portion of the progress bar in a different color just keep adding a new div with class progress-bar inside progress.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1" />
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
</head>
 
<body>
    <center>
        <h1 style="color: green">GeeksforGeeks</h1>
        <br />
        <div class="progress" style="max-width: 60%">
            <div class="progress-bar"
                style="width: 10%">10%
            </div>
            <div class="progress-bar bg-success"
                style="width: 20%">20%
            </div>
            <div class="progress-bar bg-danger 
                progress-bar-stripped" style="width: 30%">
                30%
            </div>
            <div class="progress-bar bg-warning 
                progress-bar-stripped" style="width: 40%">
                40%
            </div>
        </div>
    </center>
</body>
 
</html>

Output:

Method 2: Using the background-color property of CSS:

We can change the color of the progress bar to any desired color using the style parameter with the background-color property. To create some portion of the progress bar in a different color just keep adding a new div with class progress-bar inside progress.

Example: Here, we will change the color of the progress bar using definitive colors with the help of their hex codes, name, or RGB Values.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1" />
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
</head>
 
<body>
    <center>
        <h1 style="color: green">GeeksforGeeks</h1>
        <br />
        <div class="progress" style="max-width: 60%">
            <div class="progress-bar"
                style="width: 80%; background-color: green">
            </div>
            <div class="progress-bar progress-bar-stripped"
                style="width: 80%; background-color: #66b400">
            </div>
            <div class="progress-bar progress-bar-stripped"
                style="width: 70%; background-color: rgb(141, 3, 72)">
            </div>
        </div>
        <br />
    </center>
</body>
 
</html>