UI & Interface

This document is displayed in context of Project name
This is a box above the title of content
Name: Value

This is a title of content

This is a box below the title of content
Another name: Another value
above

This is a subtitle of content

below
Alerts

Basic Alerts

× Success! This is a success message.
× Info! This is an information message.
× Warning! This is a warning message.
× Error! This is a danger message.

Block Alerts

×

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

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

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.
Progress Bars

Basic progress bars

60% Complete
60% Complete (success)
60% Complete (warning)
60% Complete (info)
60% Complete (danger)

Striped progress bars

Internet Explorer doesn't support striped progress bars!
60% Complete
60% Complete (success)
60% Complete (info)
60% Complete (warning)
60% Complete (danger)

Animated progress bars

Internet Explorer doesn't support animated progress bars!
60% Complete
60% Complete (success)
60% Complete (info)
60% Complete (warning)
60% Complete (danger)

Progress bars with value

20%
40%
60%
80%
100%
Labels & Badges

Available labels

Labels Markup
Default <span class="label label-default">
Primary <span class="label label-primary">
Success <span class="label label-success">
Info <span class="label label-info">
Warning <span class="label label-warning">
Danger <span class="label label-danger">

Thin labels (available for all examples above)

Labels Markup
Primary <span class="label label-primary bootstrap-admin-label-thin">
Success <span class="label label-success bootstrap-admin-label-thin">

Badges

Modals & Notifications
Modal dialog Alert


Tabs
Tooltips, Popovers & Pagination
Pagination