Tweet

# Twitter Bootstrap Extensions: Notifications

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: Custom Styles

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!