For longer messages, increase the padding on the top and bottom of the alert wrapper by adding .alert-block.


Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Oh snap! Change a few things up and try submitting again.
Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.

Progress Bars

Default progress bar with a vertical gradient.

60% Complete

Uses a gradient to create a striped effect. Not available in IE7-8.

20% Complete

Add .active to .progress-striped to animate the stripes right to left. Not available in all versions of IE.

40% Complete

Place multiple bars into the same .progress to stack them.

35% Complete (success)
20% Complete (warning)
10% Complete (danger)

Style Configuration

Color Style