Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to create a progress bar using bootstrap ?

  • Difficulty Level : Medium
  • Last Updated : 16 Nov, 2021

Bootstrap is an open-source framework used to design responsive websites which is easy and efficient to use. It has ready-made templates which can be used to design web pages in a limited time.

What is a progress bar?

A progress bar is used whenever there is a need for a visual interface to show progress in a particular task. Let’s say, “How much percentage of file has been downloaded or how many percent of students passed in an exam”.

For this purpose Bootstrap has a progress bar component that can be used on web pages. All the versions of bootstrap support the progress bar component.

  
 How to add progress bar using bootstrap? 

  1. Visit the official page of Bootstrap here. On the right side the bootstrap version can be selected suitable as per requirements. But its recommended to use latest version as it has new features embedded inside it.
  2. On the left side panel under Components section, Progress tab can be seen. Under progress tab the progress bar components can be seen.
  3. Now the template present can directly be used. This can be done by putting the template under body section of html page.

 Example 1: The starter template from documentation tab of bootstrap can be used. 

HTML




<!doctype html>
<html lang="en">
 
<head>
    <!-- Bootstrap CSS and JS -->
    <link href=
          rel="stylesheet"
          crossorigin="anonymous">
 
    <script src=
            crossorigin="anonymous">
      </script>
</head>
 
<body>
    <div class="progress">
        <div class="progress-bar" role="progressbar"
            aria-valuenow="0" aria-valuemin="0"
            aria-valuemax="100">
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar" role="progressbar"
            style="width: 25%" aria-valuenow="25"
            aria-valuemin="0"
            aria-valuemax="100">
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar" role="progressbar"
            style="width: 50%" aria-valuenow="50"
            aria-valuemin="0"
            aria-valuemax="100">
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar" role="progressbar"
            style="width: 75%" aria-valuenow="75"
            aria-valuemin="0"
            aria-valuemax="100">
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar" role="progressbar"
            style="width: 100%" aria-valuenow="100"
            aria-valuemin="0"
            aria-valuemax="100">
        </div>
    </div>
</body>
 
</html>

Output: The following progress bar can be seen on the webpage.

Example 2: We can display the percentage of the progress bar by writing it in between the div of the progress bar.

Syntax:

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>

Code:

HTML




<!doctype html>
<html lang="en">
 
<head>
    <!-- Bootstrap CSS and JS -->
        crossorigin="anonymous">
 
    </script>
</head>
 
<body>
    <h2>Bootstrap Progress Bar</h2>
    <div class="progress">
        <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
      </div>
</body>
 
</html>

Output: 

NOTE: The value for the progress can be changed in the code as per the requirement.

Appearance

We can change the appearance of the progress bar using the bootstrap background utilities classes like “bg-info” , “bg-success”, “bg-warning” and many more.

Syntax:

<div class="progress">
  <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Here is a code example in which we have made progress bars of different colors using different background utility classes.

Code:

HTML




<!doctype html>
<html lang="en">
 
<head>
    <!-- Bootstrap CSS and JS -->
        crossorigin="anonymous">
 
    </script>
</head>
 
<body>
    <h2>Bootstrap Progress Bar</h2>
    <div class="progress" style="margin: 5px;">
        <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="20" aria-valuemin="0"
            aria-valuemax="100">
        </div>
    </div>
    
    <div class="progress" style="margin: 5px;">
        <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0"
            aria-valuemax="100"></div>
    </div>
    <div class="progress" style="margin: 5px;">
        <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0"
            aria-valuemax="100"></div>
    </div>
    <div class="progress" style="margin: 5px;">
        <div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0"
            aria-valuemax="100"></div>
    </div>
    <div class="progress" style="margin: 5px;">
        <div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0"
            aria-valuemax="100"></div>
    </div>
 
</body>
 
</html>

Output:

Bootstrap Progress Bar in different appearances

Striped Progress Bar

We can make stripped progress bar using the class “progress-bar-striped” along with the “progress-bar” class in the component.

Syntax:

<div class="progress">
  <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Code:

HTML




<!doctype html>
<html lang="en">
 
<head>
    <!-- Bootstrap CSS and JS -->
        crossorigin="anonymous">
 
    </script>
</head>
 
<body>
    <h2>Bootstrap Striped Progress Bar</h2>
 
    <div class="progress" style="margin: 5px;">
        <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
      </div>
      <div class="progress" style="margin: 5px;">
        <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
      </div>
      <div class="progress" style="margin: 5px;">
        <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
      </div>
      <div class="progress" style="margin: 5px;">
        <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
      </div>
      <div class="progress" style="margin: 5px;">
        <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
      </div>
 
</body>
 
</html>

Output:

Bootstrap Striped Progress Bar

Animated Progress Bar

We can make animated progress bar using the class “progress-bar-animated” along with the “progress-bar” class in the component.

Syntax:

<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
</div>

Code:

HTML




<!doctype html>
<html lang="en">
 
<head>
    <!-- Bootstrap CSS and JS -->
        crossorigin="anonymous">
 
    </script>
</head>
 
<body>
    <h2>Bootstrap Animated Progress Bar</h2>
    <div class="progress">
        <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
      </div>
 
</body>
 
</html>

Output:

Bootstrap Animated Progress Bar

Supported Browsers:

  • Google Chrome
  • Opera
  • Safari
  • Mozilla Firefox
  • Brave Browser


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!