Alerts

Success! You just achieved success.
Alert! Success alert preview. This alert is dismissable.
Congrats! You just went blue.
Alert! Info alert preview. This alert is dismissable.
Watch out! Its a warning. And you should be caution.
Alert! Warning alert preview.
Its Red! and its lethal. You better get out of the red zone.
Alert! Danger alert preview.

Progress bar

Basic

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

Striped

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

Animated

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

Stacked

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

Lables & Badges

Use any of the below mentioned modifier classes to change the appearance of a label.

label Primary Success Info Inverse Warning Danger

<span class="label label-default">label</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">info</span>
<span class="label label-inverse">Inverse</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
								

Badges

Easily highlight new or unread items by adding a <span class="badge"> to links, Bootstrap navs, and more.

5 10 15 20 25 30 35

Popover on Hover



Image Thumbnails

...

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Button Button

...

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Button Button

Labels

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New

Breadcrumb

Original

Styles

Bootstrap Jumbotron

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

Learn more

Richard Doe