Style:

Interface elements

5
  • 2,4,9,7,12,10,12+20%
    36094 Visits
  • 20,15,18,14,10,9,9,90%
    1433 Users
  • 3,5,9,7,12,20,10-50%
    8650 Orders
  • 12,6,9,23,14,10,17+70%
    8650 Orders
Warning! Your monthly traffic is reaching limit.
Success! The page has been added.
Info! You have 198 unread messages.
Error! The daily cronjob has failed.
Modal dialogs
Modal dialog Alert
Progress bars

Basic progress bars

Striped progress bars

Internet Explorer doesn't support striped progress bars!

Animated progress bars

Internet Explorer doesn't support animated progress bars!
Tooltip directions

Four directions of the tooltips, just add a class: 'tip-top', 'tip-bottom', 'tip-left' or 'tip-right' without quotes to the element you want to have tooltip.

Pagination

Default pagination

Alternate pagination

<div class="pagination alternate">
Notifications
×

Warning!

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.
×

Success!

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.
×

Info!

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.
×

Error!

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.
Labels and badges

Available labels

Labels Markup
Default <span class="label">
Success <span class="label label-success">
Warning <span class="label label-warning">
Important <span class="label label-important">
Info <span class="label label-info">
Inverse <span class="label label-inverse">

Available badges

Name Example Markup
Default 1 <span class="badge">
Success 2 <span class="badge badge-success">
Warning 4 <span class="badge badge-warning">
Important 6 <span class="badge badge-important">
Info 8 <span class="badge badge-info">
Inverse 10 <span class="badge badge-inverse">
Growl-like notifications
  • Standard notification
  • Sticky notification
  • Notification with image