Layouts
Default
Compact Sidebar
Fixed Header
Boxed Wrapper
Skins

Progress

Default

To caption a progress bar, simply add a <div>with your caption text and associate the caption with the <progress>element using the aria-describedbyattribute.

Reticulating splines… 0%
Reticulating splines… 25%
Reticulating splines… 50%
Reticulating splines… 75%
Reticulating splines… 100%
IE9 support

Internet Explorer 9 doesn’t support the HTML5 <progress>element, but we can work around that.

Reticulating splines… 25%
Contextual alternatives

Progress bars use some of the same button and alert classes for consistent styles.

Striped

Uses a gradient to create a striped effect.

Size

Add .progress-lgor .progress-smfor additional sizes.

10%25%50%
Skill bars

PHP 75%

100%

RUBY 40%

100%

HTML 100%

100%