Bootstrap 5 Progress Labels
Bootstrap 5 Progress Labels are used to display the progress of a process on a computer. It displays how much of the process is completed and how much is left. You can add a progress label on a web page using predefined bootstrap classes. Bootstrap provides many types of progress labels.
Bootstrap 5 Progress Labels Class: There is no such pre-defined class for Progress Labels, although, the label can be included by adding the label with the declaring the progress-bar class.
Syntax:
<div class="progress">
<div class="progress-bar">Progress Labels</div>
</div>
Below examples illustrate the Bootstrap 5 Progress Labels.
Example 1: The following example demonstrates the use of Progress Labels in Bootstrap 5.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< meta name = "viewport"
content=" width = device -width,
initial-scale = 1 ">
< link href =
rel = "stylesheet" >
< title >Bootstrap Progress label</ title >
</ head >
< body class = "p-3 m-0 border-0 bd-example" >
< center >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
< h4 >
Progress label
</ h4 >
< div class = "progress" >
< div class = "progress-bar w-50" >
50%
</ div >
</ div >
< h3 >
Learning Bootstrap Progress Label
</ h3 >
</ center >
</ body >
</ html >
|
Output:
Example 2: This is another example that demonstrates the use of multiple colored Progress Labels in Bootstrap 5.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< meta name = "viewport"
content = "width=device-width, initial-scale=1" >
< link href =
rel = "stylesheet" >
< title >Bootstrap 5 Progress Bar</ title >
</ head >
< body class = "p-3 m-0 border-0 bd-example" >
< center >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
< h4 >
Progress Bar
</ h4 >
< div class = "progress" >
< div class = "progress-bar bg-success" aria-valuenow = "0" >
Progress label 0%
</ div >
</ div >
< div class = "progress" >
< div class = "progress-bar bg-primary w-25" >
Progress label 25%
</ div >
</ div >
< div class = "progress" >
< div class = "progress-bar bg-warning w-50" >
Progress label 50%
</ div >
</ div >
< div class = "progress" >
< div class = "progress-bar bg-info w-75" >
Progress label 75%
</ div >
</ div >
< div class = "progress" >
< div class = "progress-bar bg-dark w-100" >
Progress label 100%
</ div >
</ div >
< h3 >
Learning Bootstrap multiple colored progress labels
</ h3 >
</ center >
</ body >
</ html >
|
Output:
Reference: https://getbootstrap.com/docs/5.2/components/progress/#labels
Last Updated :
30 Nov, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...