Progress

Preview

This is a preview of the Bootstrap element. For more details, please visit the official Bootstrap page.

How it works

We use the .progress as a wrapper to indicate the max value of the progress bar. We use the inner .progress-bar to indicate the progress so far. The .progress-bar requires an inline style, utility class, or custom CSS to set their width.

<div class="progress">
    <div class="progress-bar"></div>
</div>
<div class="progress">
    <div class="progress-bar" style="width: 25%"></div>
</div>
<div class="progress">
    <div class="progress-bar" style="width: 50%"></div>
</div>
<div class="progress">
    <div class="progress-bar" style="width: 75%"></div>
</div>
<div class="progress">
    <div class="progress-bar" style="width: 100%"></div>
</div>

Bootstrap provides a handful of utilities for setting width. Depending on your needs, these may help with quickly configuring progress.

<div class="progress">
    <div class="progress-bar w-25"></div>
</div>

Styling

Below are some examples of styling for height, label, colors, stripes and animation.

40%

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

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

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

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

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