Which contextual classes are used with progress bars in Bootstrap ?
A progress bar is used to display the progress of a process on a computer. A progress bar 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. Bootstrap provides many types of progress bars.
Syntax:
<div class="progress"> <div class="progress-bar" style="width:x%"></div> <div>
Example 1:
HTML
<!DOCTYPE html><html lang="en"> <head> <title>Bootstrap Progress Bar</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= <script src= </script> <script src= </script> <script src= </script></head> <body> <h1 style="color:green;text-align:center;"> GeeksforGeeks </h1> <div class="container"> <div class="progress"> <div class="progress-bar" style="width:80%"></div> </div> </div></body> </html> |
Output:
We will learn about contextual-classes in Progress bar: The contextual classes that can be used with progress bars are:
- .bg-success
- .bg-info
- .bg-warning
- .bg-danger
In simple language; we can give different colors to the progress bar.
- Success: Shade of Green colour (#5cb85c)
- Danger: Shade of Red colour (#d9534f)
- Warning: Shade of Yellow colour ( #f0ad4e)
- Info: Shade of Blue colour(#5bc0de)
NOTE: The default color of the progress bar is blue.
Example 2:
HTML
<!DOCTYPE html><html lang="en"> <head> <title>Bootstrap Progress Bar</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= <script src= </script> <script src= </script> <script src= </script></head> <body style="text-align:center;"> <h1 style="color:green;"> GeeksforGeeks </h1> <div class="container"> <div class="progress"> <div class="progress-bar" style="width:30%;"> 30% Complete (Default) </div> </div> <div class="progress"> <div class="progress-bar bg-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%"> 40% Complete (success) </div> </div> <div class="progress"> <div class="progress-bar bg-info" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%"> 50% Complete (info) </div> </div> <div class="progress"> <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%"> 60% Complete (warning) </div> </div> <div class="progress"> <div class="progress-bar bg-danger" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%"> 70% Complete (danger) </div> </div> </div></body> </html> |
Output:
.png)
