Colors  
Mobile view Desktop view

Components

Labels and Badges


1 2 4 6 8 10

Default Success Warning Important Info Inverse

At vero eos et sunt Similique atin culpa Voluptatum deleniti

At vero eos et sunt Similique atin culpa Icon-envelope-alt

dignissimos et ducimus similique sunt

Similique sunt dignissimos et ducimus

Similique sunt in culpa qui mollitia

Deserunt mollitia animi sunt dignissim

At vero eos eto roficia qui

Officia qui deserunt in culpa qui

Progress Bars


60% 20% 40% 60% 20% 40% 60% 80%

Progress Bars (full width)


20%

Alerts


Warning! Best check yo self, you're not looking too good.
Oh snap! Change a few things up and try submitting again.
Well done! Change a few things up and try submitting again.
Heads up! Change a few things up and try submitting again.

Alerts with longer messages


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

Warning!

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

Well done!

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.