Components

Alerts & Notifications elements

Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Warning! Better check yourself, you're not looking too good.
Oh snap! Change a few things up and try submitting again.

Contextual background

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.

Labels & Badges

Labels colors

Just add the class .label to create a label.

Gray Blue Green Light blue Orange Red

Badges colors

Just like labels, add the the class .badge to create one.

4 3 2 4 9

Tooltips & Popovervariations

Tooltip positions

Good way to explain an action button or icon menu.


Popover colors and positions

Customized popover with color variations.

Progress bar options

Colors variations

40% Complete (success)
20% Complete
60% Complete (warning) 60%
80% Complete (danger)

Striped variations

40% Complete (success)Animated
20% Complete
60% Complete (warning)
80% Complete (danger)

Size options

Thin
40% Complete (success)
Normal
20% Complete
Big
60% Complete (warning) 60%

Animations options

normal
stripped
animated
big animated