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:

Html:

  <div class='notifications top-left'></div>

Position Options:

Notifications supports four 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

Js:

  $('.top-left').notify({
    message: { text: 'Aw yeah, It works!' }
  }).show(); // for the ones that aren't closable and don't fade out there is a .close() function.

Options:

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.' }
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!