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.

Default
25%
Primary
60%
Danger
60%
Warning
60%
Success
60%
Info
60% 
<div class="progress-container">
  <span class="progress-badge">Default</span>
  <div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 25%;">
      <span class="progress-value">25%</span>
    </div>
  </div>
</div>

<div class="progress-container progress-primary">
  <span class="progress-badge">Primary</span>
  <div class="progress">
    <div class="progress-bar progress-bar-warning" 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-warning" 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-warning">
  <span class="progress-badge">Warning</span>
  <div class="progress">
    <div class="progress-bar progress-bar-warning" 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-success">
  <span class="progress-badge">Success</span>
  <div class="progress">
    <div class="progress-bar progress-bar-warning" 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-info">
  <span class="progress-badge">Info</span>
  <div class="progress">
    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
      <span class="progress-value">60%</span>
    </div>
  </div>
</div>