Bootstrap Progress Bars

Bootstrap uses the .progress as a wrapper to indicate the max value of the progress bar. Use the inner .progress-bar to indicate the progress so far. The .progress-bar also requires some role and aria attributes to make it accessible. Bootstrap does not uses the HTML5 <progress> element.

For example,

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

1. Labels

You can add labels to your progress bars by placing text within the .progress-bar. For example,

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

2. Height

Set a height value on the .progress to make the inner .progress-bar automatically resize accordingly. For example,

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

3. Background

You can use background utility classes to change the appearance of individual progress bars. For example,

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

4. Multiple Bars

You can include multiple progress bars in a progress. For example,

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

5. Striped

Add .progress-bar-striped to any .progress-bar to apply a stripe via CSS gradient over the progress bar’s background color. For example,

<div class="progress">
 <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>