Skip to content
Related Articles

Related Articles

Improve Article

Bootstrap 4 | Progress Bars

  • Last Updated : 10 Aug, 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: 

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: 
 

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: 
 

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

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: 
 

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

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: 
 

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

Output: 
 

Stripped Progress Bars: The .progress-bar-stripped class is used to add stripes to the progress bars. Use the combination of .progress-bar and .progress-bar-stripped classes to create stripped 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-stripped" style="width:x%">
         x%
    </div>
<div>

Example: 
 

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

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-stripped and progress-bar-animated to create an animated progress bar.
Syntax: 
 

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

Example: 
 

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

Output: 
 

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

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

Output: 
 

Supported Browser:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari



My Personal Notes arrow_drop_up
Recommended Articles
Page :