Progress

A progress bar can be used to show a user how far along he is in a process.

Default markup

To create a default progress bar, add a .progress class to a <div> element:

<div class="progress">
  <div class="progress-bar" style="width: 38%" role="progressbar" aria-valuenow="38" aria-valuemin="0" aria-valuemax="100">
    <span class="sr-only">38% Complete</span>
  </div>
</div>

Progress size

Using Bootstrap’s typical naming structure, you can create a standard progress, or scale it up to different sizes based on what’s needed.

<div class="progress progress-sm">
  <div class="progress-bar" style="width: 57%" role="progressbar" aria-valuenow="57" aria-valuemin="0" aria-valuemax="100">
    <span class="sr-only">57% Complete</span>
  </div>
</div>

Progress without value

Remove the showed value by adding a class called .sr-only.

<div class="progress">
  <div class="progress-bar" style="width: 75%" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
    <span class="sr-only">75% Complete</span>
  </div>
</div>

Indeterminate progress

To create indeterminate progress add .progress-bar-indeterminate to the .progress-bar element.

<div class="progress progress-sm">
  <div class="progress-bar progress-bar-indeterminate"></div>
</div>

Native progress element

You can also use native HTML5 <progress> element.

<progress class="progress progress-sm" value="15" max="100"/>

Progress color

Customize the color of the progress bar. You can click here to see the list of available colors.

<div class="progress progress-sm mb-2">
  <div class="progress-bar bg-red" style="width: 24%" role="progressbar" aria-valuenow="24" aria-valuemin="0" aria-valuemax="100">
    <span class="sr-only">24% Complete</span>
  </div>
</div>
<div class="progress progress-sm mb-2">
  <div class="progress-bar bg-green" style="width: 45%" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100">
    <span class="sr-only">45% Complete</span>
  </div>
</div>
<div class="progress progress-sm mb-2">
  <div class="progress-bar bg-purple" style="width: 64%" role="progressbar" aria-valuenow="64" aria-valuemin="0" aria-valuemax="100">
    <span class="sr-only">64% Complete</span>
  </div>
</div>
<div class="progress progress-sm">
  <div class="progress-bar bg-pink" style="width: 38%" role="progressbar" aria-valuenow="38" aria-valuemin="0" aria-valuemax="100">
    <span class="sr-only">38% Complete</span>
  </div>
</div>

Documentation