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=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
      </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
      </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
      </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=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
      </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
      </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
      </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:

Which contextual classes are used with progress bars in Bootstrap ?

Explore