How to create a progress bar in different colors in Bootstrap ?
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.
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:
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.
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.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.