Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.
Basic Example
Default progress bar.
Example
With Label
Remove the <span> with .sr-only class from within the progress bar to show a visible percentage.
Example
Minimal Width
To ensure that the label text remains legible even for low percentages, consider adding a min-width to the progress bar.
Example
Contextual Alternatives
Progress bars use some of the same button and alert classes for consistent styles.
Example
Striped
Uses a gradient to create a striped effect. Not available in IE9 and below.
Example
Animated
Add .active to .progress-bar-striped to animate the stripes right to left. Not available in IE9 and below.
Example
Stacked
Place multiple bars into the same .progress to stack them.
Example
Slim 3px Version
Add .h-3 to .progress-bar.
Example
Slim 6px Version
Add .h-6 to .progress-bar.
Example
Slim 9px Version
Add .h-9 to .progress-bar.
Example
