Bootstrap 5 Progress Multiple bars
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.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel = "stylesheet" > </ head > < body > < div class = "container" > < div > < h1 class = "text-success" >w3wiki</ 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.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel = "stylesheet" > </ head > < body > < div class = "container" > < div > < h3 class = "text-success" >w3wiki</ 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
Contact Us