Elements

Progress Bars

You can stripe...

...and activate them all!

Labels

Labels are formatted text tags for highlighted, informative information.

Default Primary Secondary Success Warning Error Important Info Inverse

Add the label class to <span> or <small> elements. You can add another class label-primary, label-secondary, label-success, label-warning and label-error for colored labels.

Default Primary Secondary Success Warning Error Important Info Inverse

Add the label-rounded class to have rounded labels.

<span class="label">default label</span>
<span class="label label-primary">primary label</span>
<span class="label label-primary label-rounded">label rounded</span>

<span class="label">default label</span>
<span class="label label-primary">primary label</span>
<span class="label label-primary label-rounded">label rounded</span>

Badges

Badges are often used as unread number indicators.

Notification Success Warning Error Important Info Inverse

Alerts

Beware! Aliens are among us and they will find you.

They are coming! You can run, but you can't hide.

Well done! You successfully killed an Alien.

Very good! But remember, they will come back.

Well

I'm in a well!

And I'm in a larger well!

And I'm in the largest well!

Modals

Modals are flexible dialog prompts.

Open Modal

Tooltips

Tooltips provide context information labels that appear on hover and focus.

Popovers

Popovers are small overlay content containers. Popovers component is built entirely in CSS.

Buttons

The theme brings different types of buttons ready to use for different purposes.

You can toggle them all...

...and let them loading.

All buttons are available in block styles...

...and different sizes