Bootstrap 5 Progress Multiple bars is used to put multiple bars in a single progress bar you can include multiple progress bars in a progress component giving them different colors and styling using bootstrap 5 classes.
Bootstrap 5 Progress Multiple bars Class: There is no class to create multiple progress bars, we just need to include multiple progress bars in the progress component.
Syntax: Here * can be any value.
<div class="progress"> <div class="progress-bar ..." style="width: " aria-valuenow="*" aria-valuemin="*" aria-valuemax="*"> </div> <div class="progress-bar ..." style="width: " aria-valuenow="*" aria-valuemin="*" aria-valuemax="*"> </div> </div>
Below example illustrate the Bootstrap 5 Progress Multiple bars:
Example1:In this example, we set the different width progress classes adding different colors and backgrounds.
<!DOCTYPE html> < html lang = "en" >
< head >
< link href =
rel = "stylesheet" >
</ head >
< body >
< div class = "container" >
< div >
< h1 class = "text-success" >GeeksforGeeks</ h1 >
< h3 > Bootstrap 5 Progress Multiple bars</ h3 >
</ div >
< div >
< div class = "progress mb-3 mt-4" >
< div class = "progress-bar bg-warning" style = "width: 10%" aria-valuenow = "10" aria-valuemin = "0" aria-valuemax = "100" >
</ div >
< div class = "progress-bar bg-primary" style = "width: 30%" aria-valuenow = "30" aria-valuemin = "0" aria-valuemax = "100" >
</ div >
< div class = "progress-bar bg-secondary" style = "width: 20%" aria-valuenow = "20" aria-valuemin = "0" aria-valuemax = "100" >
</ div >
</ div >
< div class = "progress mb-3" >
< div class = "progress-bar bg-secondary" style = "width: 15%" aria-valuenow = "15" aria-valuemin = "0" aria-valuemax = "100" >
</ div >
< div class = "progress-bar bg-success" style = "width: 30%" aria-valuenow = "30" aria-valuemin = "0" aria-valuemax = "100" >
</ div >
< div class = "progress-bar bg-info" style = "width: 20%" aria-valuenow = "20" aria-valuemin = "0" aria-valuemax = "100" >
</ div >
</ div >
< div class = "progress mb-3" >
< div class = "progress-bar bg-warning" style = "width: 20%" aria-valuenow = "20" aria-valuemin = "0" aria-valuemax = "100" >
</ div >
< div class = "progress-bar bg-danger" style = "width: 40%" aria-valuenow = "40" aria-valuemin = "0" aria-valuemax = "100" >
</ div >
< div class = "progress-bar bg-primary" style = "width: 25%" aria-valuenow = "25" aria-valuemin = "0" aria-valuemax = "100" >
</ div >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Example 2: In this example, we set the height and width progress classes stripped with the background color.
<!DOCTYPE html> < html lang = "en" >
< head >
< link href =
rel = "stylesheet" >
</ head >
< body >
< div class = "container" >
< div >
< h3 class = "text-success" >GeeksforGeeks</ h3 >
< h5 >Bootstrap 5 Progress Multiple bars</ h5 >
</ div >
< div class = "progress mb-3 mt-4" style = "height: 20px;" >
< div class = "progress-bar bg-success" style = "width: 15%" aria-valuenow = "15" aria-valuemin = "0" aria-valuemax = "100" >
</ div >
< div class = "progress-bar bg-info" style = "width: 20%" aria-valuenow = "20" aria-valuemin = "0" aria-valuemax = "100" >
</ div >
< div class = "progress-bar bg-warning" style = "width: 30%" aria-valuenow = "30" aria-valuemin = "0" aria-valuemax = "100" >
</ div >
</ div >
< div class = "progress mb-3" style = "height: 35px;" >
< div class = "progress-bar bg-secondary" style = "width: 10%" aria-valuenow = "10" aria-valuemin = "0" aria-valuemax = "100" >
</ div >
< div class = "progress-bar bg-success" style = "width: 15%" aria-valuenow = "15" aria-valuemin = "0" aria-valuemax = "100" >
</ div >
< div class = "progress-bar bg-danger" style = "width: 20%" aria-valuenow = "20" aria-valuemin = "0" aria-valuemax = "100" >
</ div >
</ div >
< div class = "progress mb-3" style = "height: 25px;" >
< div class = "progress-bar bg-warning" style = "width: 20%" aria-valuenow = "20" aria-valuemin = "0" aria-valuemax = "100" >
</ div >
< div class = "progress-bar bg-primary" style = "width: 25%" aria-valuenow = "25" aria-valuemin = "0" aria-valuemax = "100" >
</ div >
< div class = "progress-bar bg-info" style = "width: 30%" aria-valuenow = "30" aria-valuemin = "0" aria-valuemax = "100" >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Reference: https://getbootstrap.com/docs/5.0/components/progress/#multiple-bars