Alert and Notifications

Alert with Links

Use the .alert-link utility class to quickly provide matching colored links within any alert.

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.

Dismissable Alerts

Build on any alert by adding an optional .alert-dismissable and close button.

Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.

Alert Condensed

Warning! Best check yo self, you're not looking too good.
Oh snap! Change a few things up and try submitting again.

Notification Top Right with Title

Notification with title on top right position. Click to preview.

Notification Top Left No Title

Notification without title on top left position. Click to preview.

Notification Bottom Right with Title

Notification with title on bottom right position. Click to preview.

Notification Bottom Left No Title

Notification without title on bottom left position. Click to preview.

Modals

Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults. Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.



Overlapping modals not supported

Be sure not to open a modal while another is still visible. Showing more than one modal at a time requires custom code.

Popover

Add small overlays of content, like those on the iPad, to any element for housing secondary information. Four options are available: top, right, bottom, and left aligned. Toggle a popover via JavaScript by clicking the button below.

Tooltip

Tooltip make it easier to help user obtain more information by hovering on the selected items. Hover on the links in paragraph below to see tooltip:

Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray.

Progress Bars

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

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

Labels

Default Primary Success Info Warning Danger

Grey Black Green Blue Yellow Red

Badges

Inbox 42 Inbox 42 Inbox 42

Inbox 42 Inbox 42 Inbox 42