Open In App

Which contextual classes are used with progress bars in Bootstrap ?

Last Updated : 28 Nov, 2021
Improve
Improve
Like Article
Like
Save
Share
Report

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: 




                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    Suggest improvement
                                

                            


                            

                                                            

                                    
                                        
                                        Previous
                                    
                                    
                                    

                                        How to add badge to list group in Bootstrap ?
                                    

                                

                                                            

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        How to deploy React app to Surge ?
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                What is Contextual classes of table in Bootstrap ?
            

        
    
        
            

                Bootstrap 5  List group Contextual classes
            

        
    
        
            

                Bootstrap 4 | Progress Bars
            

        
    
        
            

                Bootstrap 5 Progress Multiple bars
            

        
    
        
            

                React-Bootstrap Badge Contextual variations
            

        
    
        
            

                Progress Bars in ElectronJS | Set - 2
            

        
    
        
            

                Progress Bars in ElectronJS | Set - 1
            

        
    
        
            

                Bulma Progress bars Sizes
            

        
    
        
            

                Bulma Progress Bars Colors
            

        
    
        
            

                Which tag is used to represent progress of a task in HTML & how is it different from <meter> tag ?
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
A

        

            
        

        

                                    


                                    

                                        akshitsaxenaa09                                

                            

                            

            
                                

                            

                                                                    

                                        
Article Tags : 

                                        
                                    

                                                                                            

                                                                                    

                              

                            

                                                        
                        

                    

                

            

        
        


        

                


			
		
		                
        

    

    

        

            

            

        

    












	

    
  

  
  








    
        We use cookies to ensure you have the best browsing experience on our website. By using our site, you
        acknowledge that you have read and understood our
        Cookie Policy &
        Privacy Policy
            
    







   Lightbox