Progress bar

Simply use a classes .progress .progress-bar and create a progress bar.

Basic
60% Complete
Basic With Title
60%
Variations
40% Complete (danger)
60% Complete (danger)
70% Complete (danger)
90% Complete (danger)
Striped

Simply use a classes .progress-bar-striped and create a striped progress bar.

60% Complete (warning)
60% Complete (warning)
Stacked
Active

Simply use a classes .progress-bar-striped active and create a striped progress bar.

60% Complete (warning)
60% Complete (warning)

vertical Different size

Use a class .progress-bar-vertical

Vertical Complex Usage

90
%

Progress bar variation

Use a class .progress-rounded

Basic rounded
60%
square style

Use a class .progress-square

progress bar on load

Use data width data-width="50%"

50% Complete (secondary)
60% Complete (success)
80% Complete (warning)

Progress bar with different size

4 Pixel height

Use a class .progress-xs-height

8 Pixel height

Use a class .progress-sm-height

12 Pixel height

Use a class .progress-lg-height

20 pixel height