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

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>
Output:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
akshaysingh98088
Bootstrap-Questions
HTML-Questions
Picked
Bootstrap
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to set Bootstrap Timepicker using datetimepicker library ?
How to Show Images on Click using HTML ?
How to Use Bootstrap with React?
Tailwind CSS vs Bootstrap
How to keep gap between columns using Bootstrap?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to set the default value for an HTML <select> element ?
How to update Node.js and NPM to next version ?
How to set input type date in dd-mm-yyyy format using HTML ?