Skip to content
Related Articles

Related Articles

Improve Article

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

  • Last Updated : 22 Sep, 2021
Geek Week

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=
</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=
</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>

Output:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :