PROGRESS BARS

Basic

Use background .bg-{color} classes to change the color.

Stripped

Add .progress-bar-striped to any .progress-bar.

Multiple bars

Include multiple progress bars in .progress.

Sizes

Use progress-bar-{xs | sm | md | lg | xl} classes with the .progress-bar.

PROGRESS WITH LABELS

Popups

Styled popups with .popup class

Labels

Included text might be accompanied with badges.

Project info ...

45%

This got progress

60%

Inline Information

Add labels to your progress bars by placing text within the .progress-bar.

25%
45%
60%
75%

Badges scale to match the size of the immediate parent element.

Ta Ta Ta Ta Ta Ta Ta Ta

Circle Badges with .badge-circle class

2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

Rounded Badges with .badge-pill class

1 2 3 4 5 6 7 8 8 7 6 5 4 3 2 1
5 6 7 8 8 7 6 5

Pills

Rounded Badges with .badge-pill class

Pills

Empty Badges with .badge-empty class

Images