Bootstrap 4 | Progress Bars

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:



filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>                    

chevron_right


Output:

Height of Progress Bar: Use CSS property to change the height of progress bar. The default height of progress is 16px. The height of progress and progress-bar container must be the same.

Syntax:

<div class="progress" style="height:30px;">
    <div class="progress-bar" style="width:x%";height30px;></div>
<div>

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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" style="height:30px;">
            <div class="progress-bar" 
                 style="width:80%;height:30px;">
            </div>
        </div>
    </div>
</body
  
</html>                    

chevron_right


Output:

Labeled Progress Bar: The labeled progress bar is used to display the text inside the progress bar to show the task completion percentage.

Syntax:

<div class="progress">
    <div class="progress-bar" style="width:x%">x%</div>
<div>

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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:80%;">
                80%
            </div>
        </div>
    </div>
</body
  
</html>                    

chevron_right


Output:

Colored Progress Bars: Use Bootstrap 4 contextual background classes to set the color of progress bar. The default color of the progress bar is blue.


Syntax:

<div class="progress">
    <div class="progress-bar bg-*" style="width:x%">x%</div>
<div>

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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:50%;">
                50%
            </div>
        </div><br>
          
        <div class="progress">
            <div class="progress-bar bg-success" style="width:90%;">
                90%
            </div>
        </div><br>
          
        <div class="progress">
            <div class="progress-bar bg-warning" style="width:30%;">
                30%
            </div>
        </div><br>
          
        <div class="progress">
            <div class="progress-bar bg-danger" style="width:10%;">
                10%
            </div>
        </div><br>
          
        <div class="progress">
            <div class="progress-bar bg-info" style="width:70%;">
                70%
            </div>
        </div><br>
    </div>
</body
  
</html>                    

chevron_right


Output:

Striped Progress Bars: The .progress-bar-striped class is used to add stripes to the progress bars. Use the combination of .progress-bar and .progress-bar-striped classes to create striped progress bar. Use Bootstrap 4 contextual background classes to set the color of progress bar.

Syntax:

<div class="progress">
    <div class="progress-bar progress-bar-striped" style="width:x%">
         x%
    </div>
<div>

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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 progress-bar-striped" 
                        style="width:50%;">50%</div>
        </div><br>
          
        <div class="progress">
            <div class="progress-bar bg-success progress-bar-striped"
                        style="width:90%;">90%</div>
        </div><br>
          
        <div class="progress">
            <div class="progress-bar bg-warning progress-bar-striped"
                        style="width:30%;">30%</div>
        </div><br>
          
        <div class="progress">
            <div class="progress-bar bg-danger progress-bar-striped"
                        style="width:10%;">10%</div>
        </div><br>
          
        <div class="progress">
            <div class="progress-bar bg-info progress-bar-striped"
                        style="width:70%;">70%</div>
        </div><br>
    </div>
</body
  
</html>                            

chevron_right


Output:

Animated Progress Bar: The .progress-bar-animated class is used to create an animated progress bar. Use the combination of .progress-bar, progress-bar-striped and progress-bar-animated to create an animated progress bar.

Syntax:

<div class="progress">
    <div class="progress-bar progress-bar-striped progress-bar-animated" 
            style="width:x%">
        x%
    </div>
<div>

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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 progress-bar-striped
                    progress-bar-animated" style="width:50%;">50%</div>
        </div><br>
          
        <div class="progress">
            <div class="progress-bar bg-success progress-bar-striped
                    progress-bar-animated" style="width:90%;">90%</div>
        </div><br>
          
        <div class="progress">
            <div class="progress-bar bg-warning progress-bar-striped
                    progress-bar-animated" style="width:30%;">30%</div>
        </div><br>
          
        <div class="progress">
            <div class="progress-bar bg-danger progress-bar-striped
                    progress-bar-animated" style="width:10%;">10%</div>
        </div><br>
          
        <div class="progress">
            <div class="progress-bar bg-info progress-bar-striped 
                    progress-bar-animated" style="width:70%;">70%</div>
        </div><br>
    </div>
</body
  
</html>                    

chevron_right


Output:

Multiple Progress Bars: Multiple progress bars can be stacked to display different colored progress bars.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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:10%;">
                10%
            </div>
              
            <div class="progress-bar bg-success" style="width:20%;">
                20%
            </div>
  
            <div class="progress-bar bg-warning" style="width:30%;">
                30%
            </div>
  
            <div class="progress-bar bg-danger" style="width:30%;">
                30%
            </div>
        </div>
    </div>
</body
  
</html>                                

chevron_right


Output:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.