The Wayback Machine - https://web.archive.org/web/20221002094130/https://www.geeksforgeeks.org/bootstrap-4-progress-bars/
Skip to content
Related Articles

Related Articles

Bootstrap 4 | Progress Bars

View Discussion
Improve Article
Save Article
  • Difficulty Level : Medium
  • Last Updated : 29 Apr, 2022
View Discussion
Improve Article
Save Article

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=
"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: 
 
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=
"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" 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=
"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: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=
"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: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=
"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 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=
"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 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=
"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: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 Browsers:
  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari

My Personal Notes
arrow_drop_up
Previous
Bootstrap 4 | Badges
Next

Bootstrap 4 | Spinners
Recommended Articles
Page :
Which contextual classes are used with progress bars in Bootstrap ?
26, Nov 21
Bootstrap Progress Bar and Jumbotron
09, Sep 17
How to do box shadow with progress bar style using bootstrap?
31, Jul 19
How to create multi step progress bar using Bootstrap ?
11, Jan 21
How to animate a Progress Bar in Bootstrap ?
09, Aug 21
How to create a progress bar in different colors in Bootstrap ?
27, Aug 21
How to create a stacked progress bar using Bootstrap 5 ?
05, Oct 21
How to create a progress bar using bootstrap ?
28, Oct 21
How to create animated progress bar using react-bootstrap ?
29, Nov 21
Include Bootstrap in AngularJS using ng-bootstrap
18, Jun 19
Difference between bootstrap.css and bootstrap-theme.css
13, Mar 20
Difference between Bootstrap 4 and Bootstrap 5
09, Jul 20
Difference Between Bootstrap 3 and Bootstrap 4
02, Jun 20
Bootstrap Cheatsheet - A Basic Guide to Bootstrap
23, Sep 22
Bootstrap5 | Progress
10, Sep 20
How to get circular buttons in bootstrap 4 ?
08, Jul 19
How to make Timepicker using Angular UI Bootstrap ?
03, Jun 21
How to create a two tone banner in bootstrap ?
19, Nov 20
How to write a form in different line using Bootstrap ?
21, Jul 21
Create a Single Page Responsive Website Using Bootstrap
29, Apr 21
How to configure modal width in Bootstrap?
14, Feb 20
How to remove arrow in dropdown in Bootstrap ?
25, Jun 19
Visibility of elements in bootstrap with Examples
26, Dec 18
Vertical alignment in Bootstrap with Examples
10, Jan 19
Article Contributed By :
https://media.geeksforgeeks.org/auth/avatar.png
Dharmendra_Kumar
@Dharmendra_Kumar
Vote for difficulty
Current difficulty :
Medium





Improved By :
Article Tags :
Report Issue

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

Start Your Coding Journey Now!