[ bracket ]

Modal Box

Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.

Tooltips

The tooltip is a common graphical ui element. The user hovers the pointer over an item, without clicking it, and a tooltip may appear.

Popovers

Add small overlays of content, like those on the iPad, to any element for housing secondary information.

Alert Messages

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

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

Announcements!

Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Progress Bars

Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.

Basic Progress

Default progress bar. Progress bars use some of the same button and alert classes for consistent styles.

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

Striped Progress

Uses a gradient to create a striped effect. Not available in IE8

40% Complete (success)

Animated Progress

Add .active to .progress-striped to animate the stripes right to left. Not available in all versions of IE.

40% Complete (success)

Labels & Badges

Labels

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

Default Primary Success Info Warning Danger

Badges

Easily highlight new or unread items by adding below to links, navs, and more.

42 10 28 90 33 21

Badge Example

Adapts to active nav states.

Online Users
  • Eileen Sideways Los Angeles, CA
  • 2 Zaham Sindilmaca San Francisco, CA
  • Nusja Nawancali Bangkok, Thailand
  • Renov Leongal Cebu City, Philippines
  • Weno Carasbong Tokyo, Japan
Offline Users
  • Eileen Sideways Los Angeles, CA
  • Zaham Sindilmaca San Francisco, CA
  • Nusja Nawancali Bangkok, Thailand
  • Renov Leongal Cebu City, Philippines
  • Weno Carasbong Tokyo, Japan
  • Renov Leongal Cebu City, Philippines
  • Weno Carasbong Tokyo, Japan
Favorites
  • Eileen Sideways Los Angeles, CA
  • Zaham Sindilmaca San Francisco, CA
  • Nusja Nawancali Bangkok, Thailand
  • Renov Leongal Cebu City, Philippines
  • Weno Carasbong Tokyo, Japan
History
  • Eileen Sideways Hi hello, ctc?... would you mind if I go to your...
  • Zaham Sindilmaca This is to inform you that your product that we...
  • Nusja Nawancali Are you willing to have a long term relat...
Settings