# Notify

A beautiful, responsive, customizable, accessible replacement for Javascript’s popup boxes.

## Usage

### CSS

In order to use this plugin on your page you will need to include the following styles in the “Page plugins” area from the page’s head section:

    <link rel="stylesheet" href="/docs/assets/vendor/animate.css/animate.min.css">

### JS

In order to use this plugin on your page you will need to include the following script in the “Optional JS” area from the page’s footer:

    <script src="/docs/assets/vendor/bootstrap-notify/bootstrap-notify.min.js"></script>

## Initialization

Please read the official documentation to see the complete list of options and methods.

## Examples

    <button class="btn btn-default" data-toggle="notify" data-placement="top" data-align="left" data-type="default" data-icon="ni ni-bell-55">Top Left</button>
    <button class="btn btn-default" data-toggle="notify" data-placement="top" data-align="center" data-type="default" data-icon="ni ni-bell-55">Top Center</button>
    <button class="btn btn-default" data-toggle="notify" data-placement="top" data-align="right" data-type="default" data-icon="ni ni-bell-55">Top Right</button>

    <button class="btn btn-default" data-toggle="notify" data-placement="bottom" data-align="left" data-type="default" data-icon="ni ni-bell-55">Bottom Left</button>
    <button class="btn btn-default" data-toggle="notify" data-placement="bottom" data-align="center" data-type="default" data-icon="ni ni-bell-55">Bottom Center</button>
    <button class="btn btn-default" data-toggle="notify" data-placement="bottom" data-align="right" data-type="default" data-icon="ni ni-bell-55">Bottom Right</button>

### Colors

    <button class="btn btn-info" data-toggle="notify" data-placement="top" data-align="center" data-type="info" data-icon="ni ni-bell-55">Info</button>

    <button class="btn btn-success" data-toggle="notify" data-placement="top" data-align="center" data-type="success" data-icon="ni ni-bell-55">Success</button>

    <button class="btn btn-warning" data-toggle="notify" data-placement="top" data-align="center" data-type="warning" data-icon="ni ni-bell-55">Warning</button>

    <button class="btn btn-danger" data-toggle="notify" data-placement="top" data-align="center" data-type="danger" data-icon="ni ni-bell-55">Danger</button>

### Custom animations

For more animation you can check out the Anime.css library. Simply copy and paste the in/out animation class and add ii on the `data-animation-in` and `data-animation-out`.

    <button class="btn btn-default" data-toggle="notify" data-placement="top" data-align="center" data-type="default" data-icon="ni ni-bell-55" data-animation-in="animated fadeIn" data-animation-out="animated fadeOut">fadeIn</button>
    <button class="btn btn-default" data-toggle="notify" data-placement="top" data-align="center" data-type="default" data-icon="ni ni-bell-55" data-animation-in="animated fadeInDown" data-animation-out="animated fadeOutUp">fadeInDown</button>
    <button class="btn btn-default" data-toggle="notify" data-placement="top" data-align="center" data-type="default" data-icon="ni ni-bell-55" data-animation-in="animated bounceIn" data-animation-out="animated bounceOut">bounceIn</button>
    <button class="btn btn-default" data-toggle="notify" data-placement="top" data-align="center" data-type="default" data-icon="ni ni-bell-55" data-animation-in="animated flipInX" data-animation-out="animated flipOutX">flipInX</button>
    <button class="btn btn-default" data-toggle="notify" data-placement="top" data-align="center" data-type="default" data-icon="ni ni-bell-55" data-animation-in="animated zoomIn" data-animation-out="animated zoomOut">zoomIn</button>