Add Popup Notifications to Bootstrap

When you need to alert the user to something, currently you use the .alert component like this:

Figure: .alert .alert-success Looks good, but can only be used inline

I’ve found however, that when you need to alert the user to something that does not have a direct relation to the page you’re on, you need something custom. A great example is successfully achieving something after a postback.

Popup Notifications! Of course, why didn’t I think of that?

It turns out many people have already come to this conclusion as well. Unfortunately, I find their designs too similar to the alert and usually straying from Bootstrap design principles.

Check out an example from my favourite popup notification library (PNotify:

Figure: The shadow doesn’t feel right and there’s not much this popup provides that an alert can’t.

I think if Bootstrap were to design a popup notification, it should more closely resemble the desktop notifications of Chrome and Firefox. For Example:

Figure: An example Gmail popup notification

As long as the popups have a call to action, I think that a healthy balance between alert and notification can be reached with a purpose separate to the already existing alert.

Add Callouts to Bootstrap

These informational callouts are littered throughout the online Bootstrap documentation:

Bootstrap Callout

Figure: This is a nicely designed informational callout

They look great, and being used in the Bootstrap documentation I assumed they were part of Bootstrap as well. Unfortunately, they are not.

Please add these to Bootstrap as .callout, with the same contextual options as usual (.callout-default, .callout-primary, .callout-info, etc…)