Progress

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

How it works

Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. We don’t use the HTML5 <progress> element, ensuring you can stack progress bars, animate them, and place text labels over them.

We use the .progress as a wrapper to indicate the max value of the progress bar.
The .progress wrapper also requires a role="progressbar" and aria attributes to make it accessible, including an accessible name (using aria-label, aria-labelledby, or similar).
We use the inner .progress-bar purely for the visual bar and label.
The .progress-bar requires an inline style, utility class, or custom CSS to set its width.
We provide a special .progress-stacked class to create multiple/stacked progress bars.

Preview
HTML code

Consulting

85%

Marketing

92%

Leadership

81%

                
<div class="mb-5">
    <p class="text-900 mb-1">Consulting</p>
    <div class="progress position-relative bg-neutral-200" role="progressbar" aria-label="Example 4px high" style="height: 8px;" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100">
        <div class="progress-bar" style="width: 85%"></div>
        <p class="progress-number" style="left: 85%">85%</p>
    </div>
</div>
<div class="mb-5">
    <p class="text-900 mb-1">Marketing</p>
    <div class="progress position-relative bg-neutral-200" role="progressbar" aria-label="Example 4px high" style="height: 8px;" aria-valuenow="92" aria-valuemin="0" aria-valuemax="100">
        <div class="progress-bar" style="width: 92%"></div>
        <span class="progress-number" style="left: 92%">92%</span>
    </div>
</div>
<div class="mb-5">
    <p class="text-900 mb-1">Leadership</p>
    <div class="progress position-relative bg-neutral-200" role="progressbar" aria-label="Example 4px high" style="height: 8px;" aria-valuenow="81" aria-valuemin="0" aria-valuemax="100">
        <div class="progress-bar" style="width: 81%"></div>
        <span class="progress-number" style="left: 81%">81%</span>
    </div>
</div>

Backgrounds

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

Preview
HTML code

                
<div class="progress bg-neutral-200 mb-5" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar bg-success" style="width: 25%"></div>
</div>
<div class="progress bg-neutral-200 mb-5" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar bg-info" style="width: 50%"></div>
</div>
<div class="progress bg-neutral-200 mb-5" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar bg-warning" style="width: 75%"></div>
</div>
<div class="progress bg-neutral-200 mb-5" role="progressbar" aria-label="Danger example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar bg-danger" style="width: 100%"></div>
</div>