Home >>Bootstrap Tutorial >Bootstrap Progress Bars

Bootstrap Progress Bars

A progress bar is used to provide the feedback on the progress of a process on a computer to the user. You can add the class .progress in parent <div> element and add the inner class .progress-bar to its child element. That indicates how much is complete and how much more a user is to go. By default the progress bar color is blue.

These are the following types of progress bar listed below:

Basic progress bar
Progress bar labels
Colored progress bar
Progress bar height
Multiple progress bar
Striped progress bar
Animated progress bar

Basic Progress Bar

For creating basic progress bar you have to use class .progress in parent <div> element, use inner class .progress-bar inside to the child element.

Let's take an example of basic progress bar:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Progress bar</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container"> 
        <div class="progress"> 
            <div class="progress-bar" style="width:80%"></div> 
        </div> <br>
		<div class="progress"> 
            <div class="progress-bar" style="width:60%"></div> 
        </div>
    </div>
</body>
</html>

Output:

Progress Bar Labels

Progress bar labels is used to show text inside the progress bar in numeric or text.

Let's take an example of progress bar Labels:

 <!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Progress bar</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container"> 
        <div class="progress"> 
            <div class="progress-bar" style="width:80%">80%</div> 
        </div> <br>
		<div class="progress"> 
            <div class="progress-bar" style="width:60%">60%</div> 
        </div>
    </div>
</body>
</html>

Output:

80%

60%

Colored Progress Bar

To change the appearance of the progress bar you have to use the contextual background classes to its color. Use class .bg-* (* add contextual color of bootstrap).

Let's take an example of colored progress bar:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Progress bar</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Colored Progress Bars</h2>
  <div class="progress">
    <div class="progress-bar" style="width:10%"></div>
  </div><br>
  <div class="progress">
    <div class="progress-bar bg-danger" style="width:20%"></div>
  </div><br>
  <div class="progress border">
    <div class="progress-bar bg-light" style="width:30%"></div>
  </div><br>
  <div class="progress">
    <div class="progress-bar bg-success" style="width:40%"></div>
  </div><br>
  <div class="progress">
    <div class="progress-bar bg-info" style="width:50%"></div>
  </div><br>
  <div class="progress">
     <div class="progress-bar bg-warning" style="width:60%"></div>
  </div><br>
  <div class="progress">
    <div class="progress-bar bg-secondary" style="width:70%"></div>
  </div><br>
    <div class="progress border">
    <div class="progress-bar bg-white" style="width:80%"></div>
  </div><br>
  <div class="progress">
    <div class="progress-bar bg-dark" style="width:90%"></div>
  </div>
</div>
</body>
</html>

Output:

Colored Progress Bars

Progress Bar Height

By default the height of the progress bar is 16px. If you want to change, use CSS height value in class .progress. After doing this class .progress-bar will automatically resize.

Let's take an example of progress bar height:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Progress bar</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Progress Bar Height</h2>
  <div class="progress" style="height:10px">
    <div class="progress-bar" style="width:40%;"></div>
  </div>
  <br>
  <div class="progress" style="height:20px">
    <div class="progress-bar" style="width:50%;"></div>
  </div>
  <br>
  <div class="progress" style="height:30px">
    <div class="progress-bar" style="width:60%;"></div>
  </div>
</div>
</body></html>

Output:

Progress Bar Height

Multiple Progress Bar

Multiple progress bar can be stacked in single progress bar using the class .progress-bar multiple times in a single progress.

Let's take an example of multiple progress bar:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Progress bar</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Multiple Progress Bars</h2>
  <div class="progress">
    <div class="progress-bar bg-success" style="width:40%">
      40%
    </div>
    <div class="progress-bar bg-secondary" style="width:15%">
      10%
    </div>
    <div class="progress-bar bg-warning" style="width:25%">
     20%
    </div>
  </div>
</div>
</body>
</html>

Output:

Multiple Progress Bars

40%

10%

20%

Striped Progress Bar

It is used to show strips in the progress bar. Inside the <div> element add class .progress and in the same <div> element add class .progress-bar-striped.

Let's take an example of striped progress bar:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Progress bar</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Striped Progress Bars</h2>
  <div class="progress">
    <div class="progress-bar progress-bar-striped" style="width:20%"></div>
  </div>
  <br>
   <div class="progress">
    <div class="progress-bar bg-warning progress-bar-striped" style="width:30%"></div>
  </div>
  <br>
    <div class="progress">
    <div class="progress-bar bg-danger progress-bar-striped" style="width:40%"></div>
  </div><br>
  <div class="progress">
    <div class="progress-bar bg-success progress-bar-striped" style="width:50%"></div>
  </div>
  <br>
  <div class="progress">
    <div class="progress-bar bg-info progress-bar-striped" style="width:60%"></div>
  </div>
</div>
</body>
</html>

Output:

Striped Progress Bars

Animated Progress Bar

To create an animated progress-bar, you can add class .progress-bar-animated to .progress-bar. By default it is animated from right to left.

Let's take an example of animated progress bar:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Progress bar</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Animated Progress Bar</h2> 
  <div class="progress">
    <div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" style="width:50%"></div>
  </div><br>
   <div class="progress">
    <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:40%"></div>
  </div><br>
   <div class="progress">
    <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" style="width:30%"></div>
  </div>
</div>
</body>
</html>

Output:

Animated Progress Bar

« Previous Next »

Bootstrap Tutorial Bootstrap Introduction Bootstrap Example Bootstrap Container Bootstrap Jumbotron Bootstrap Grid System Bootstrap Alerts Bootstrap Typography Bootstrap Table Bootstrap Colors Bootstrap Forms Bootstrap Images Bootstrap Buttons Bootstrap Button Group Bootstrap Progress Bars Bootstrap Badges Bootstrap Pagination Bootstrap Cards Bootstrap Navs Bootstrap Fixed Navigation Bar Bootstrap Navigation Bar Bootstrap Collapse Bootstrap Carousel Bootstrap Modal Bootstrap Input Groups Bootstrap List Groups Bootstrap Tooltip Bootstrap Popover Bootstrap Flex Bootstrap Utilities Bootstrap Media Objects

Bootstrap Interview Questions

No Sidebar ads