Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Which contextual classes are used with progress bars in Bootstrap ?

  • Last Updated : 28 Nov, 2021

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: 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!