Progress Bars

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

Default Progress Bars

Change colours using .bg-{theme-color}

Default Progress Bars (Labels)
10%
20%
30%
40%
50%
60%
70%
Small Progress Bars

Add .progress-sm to make progress bars smaller.

Multiple Progress Bars
10%
20%
25%
15%
10%
20%
25%
15%
10%
20%
25%
15%
Large Progress Bars

Add .progress-lg to make progress bars larger.

10%
20%
30%
40%
50%
60%
70%
Striped Progress Bars

Add .progress-bar-striped for striped progress bars.

10%
20%
30%
40%
50%
60%
70%
Animated Progress Bars

Add .progress-bar-animated to make progress bars animated.

10%
20%
30%
40%
50%
60%
70%