Introducing... Notifications for Twitter Bootstrap. What? Doesn't it already have alerts? Yes, but they are not as user-friendly as this is, to make a notification with bootstrap you have to code some ugly psuedo-html/js solution in a hacky manner or create your own notification system. So I created this basic one that leverages the default alert script from bootstrap:


  <div class='notifications top-left'></div>
Position Options:

Notifications supports five different position classes, only if utilizing the css file provided.

Position Class Name Description
Top Left top-left Notifications will appear fixed in the top-left corner
Top Right top-right Notifications will appear fixed in the top-right corner
Bottom Left bottom-left Notifications will appear fixed in the bottom-left corner
Bottom Right bottom-right Notifications will appear fixed in the bottom-right corner
Center center Notifications will appear centered on the screen


    message: { text: 'Aw yeah, It works!' }
  }).show(); // for the ones that aren't closable and don't fade out there is a .hide() function.
Name type default description
type string 'success' Alert style, omit alert- from style name.
closable boolean true Allow alert to be closable through a close icon.
transition string 'fade' Alert transition, pretty sure only fade is supported, you can try others if you wish.
fadeOut object ...

Fade alert out after a certain delay (in ms)

Object structure: fadeOut: { enabled: true, delay: 3000 }

message object ...

Text to show on alert, you can use either html or text. HTML will override text.

Object structure: message: { html: false, text: 'This is a message.' }

icon string ... Bootstrap icon to display in the notification, omit icon- from icon name.
onClose function ... Called before alert closes.
onClosed function ... Called after alert closes.

Notifications supports custom styles, and in fact have a few that come with the download. The buttons to the left show this.

Custom Styles Included:

bangTidy: css/styles/alert-bangtidy.css

blackgloss: css/styles/alert-blackgloss.css mostly supported only by webkit!