Progress Bars

Progress Bars

Progress bars show how far a task has progressed. Create one with a .progress container and a .progress-bar child.

Basic progress bar

<div class="progress">
  <div class="progress-bar" style="width:70%"></div>
</div>

The width style controls how much of the bar is filled. Here it fills 70%.

Height

The progress bar height defaults to 1rem. You can change it with the height attribute or style:

<div class="progress" style="height:20px">
  <div class="progress-bar" style="width:40%"></div>
</div>

Colors

Use .bg-{color} on the progress bar for different colors:

<div class="progress">
  <div class="progress-bar bg-success" style="width:50%">50%</div>
</div>

<div class="progress">
  <div class="progress-bar bg-danger" style="width:80%">80%</div>
</div>

Striped progress bar

Add .progress-bar-striped for stripes:

<div class="progress">
  <div class="progress-bar progress-bar-striped" style="width:60%"></div>
</div>

Animated progress bar

Add .progress-bar-animated to make the stripes move:

<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:60%"></div>
</div>

TL;DR

• A progress bar needs .progress and .progress-bar.
• The width style sets how much is filled.
• .bg-* changes the bar color.
• .progress-bar-striped and .progress-bar-animated add effects.