Progress

Documentation and examples for using Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels.

Backgrounds

Use background utility classes to change the appearance of individual progress bars.

Primary
60%
Danger
50%
Warning
77%
Success
46%
Info
90% 
<div class="progress-container progress-primary">
    <span class="progress-badge">Primary</span>
    <div class="progress">
        <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
            <span class="progress-value">60%</span>
        </div>
    </div>
</div>
<div class="progress-container progress-danger">
    <span class="progress-badge">Danger</span>
    <div class="progress">
        <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">
            <span class="progress-value">50%</span>
        </div>
    </div>
</div>
<div class="progress-container progress-warning">
    <span class="progress-badge">Warning</span>
    <div class="progress">
        <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="77" aria-valuemin="0" aria-valuemax="100" style="width: 77%;">
            <span class="progress-value">77%</span>
        </div>
    </div>
</div>
<div class="progress-container progress-success">
    <span class="progress-badge">Success</span>
    <div class="progress">
        <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="46" aria-valuemin="0" aria-valuemax="100" style="width: 46%;">
            <span class="progress-value">46%</span>
        </div>
    </div>
</div>
<div class="progress-container progress-info">
    <span class="progress-badge">Info</span>
    <div class="progress">
        <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%;">
            <span class="progress-value">90%</span>
        </div>
    </div>
</div>

Multiple bars

Include multiple progress bars in a progress component if you need.

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

Striped

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

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

If you want to see more examples and properties please check the official Bootstrap Documentation