# Notify

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

Official Documentation

## Usage

### CSS

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

    <link rel="stylesheet" href="../../assets/libs/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 “Page JS” area from the page’s footer:

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

## Initialization

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

## Examples

Show code

    <button class="btn btn-secondary" data-toggle="notify" data-placement="top" data-align="left" data-type="dark" data-icon="fas fa-envelope-open">Top Left</button>
    <button class="btn btn-secondary" data-toggle="notify" data-placement="top" data-align="center" data-type="dark" data-icon="fas fa-envelope-open">Top Center</button>
    <button class="btn btn-secondary" data-toggle="notify" data-placement="top" data-align="right" data-type="dark" data-icon="fas fa-envelope-open">Top Right</button>
    <button class="btn btn-secondary" data-toggle="notify" data-placement="bottom" data-align="left" data-type="dark" data-icon="fas fa-envelope-open">Bottom Left</button>
    <button class="btn btn-secondary" data-toggle="notify" data-placement="bottom" data-align="center" data-type="dark" data-icon="fas fa-envelope-open">Bottom Center</button>
    <button class="btn btn-secondary" data-toggle="notify" data-placement="bottom" data-align="right" data-type="dark" data-icon="fas fa-envelope-open">Bottom Right</button>

## Options

### Colors

Show code

    <button class="btn btn-primary" data-toggle="notify" data-placement="top" data-align="center" data-type="primary" data-icon="fas fa-envelope-open">Primary</button>

    <button class="btn btn-secondary" data-toggle="notify" data-placement="top" data-align="center" data-type="secondary" data-icon="fas fa-envelope-open">Secondary</button>

    <button class="btn btn-success" data-toggle="notify" data-placement="top" data-align="center" data-type="success" data-icon="fas fa-envelope-open">Success</button>

    <button class="btn btn-danger" data-toggle="notify" data-placement="top" data-align="center" data-type="danger" data-icon="fas fa-envelope-open">Danger</button>

    <button class="btn btn-warning" data-toggle="notify" data-placement="top" data-align="center" data-type="warning" data-icon="fas fa-envelope-open">Warning</button>

    <button class="btn btn-info" data-toggle="notify" data-placement="top" data-align="center" data-type="info" data-icon="fas fa-envelope-open">Info</button>

    <button class="btn btn-dark" data-toggle="notify" data-placement="top" data-align="center" data-type="dark" data-icon="fas fa-envelope-open">Dark</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`.

Show code

    <button class="btn btn-dark" data-toggle="notify" data-placement="top" data-align="center" data-type="dark" data-icon="fas fa-envelope-open" data-animation-in="animated fadeIn" data-animation-out="animated fadeOut">fadeIn</button>
    <button class="btn btn-dark" data-toggle="notify" data-placement="top" data-align="center" data-type="dark" data-icon="fas fa-envelope-open" data-animation-in="animated fadeInDown" data-animation-out="animated fadeOutUp">fadeInDown</button>
    <button class="btn btn-dark" data-toggle="notify" data-placement="top" data-align="center" data-type="dark" data-icon="fas fa-envelope-open" data-animation-in="animated bounceIn" data-animation-out="animated bounceOut">bounceIn</button>
    <button class="btn btn-dark" data-toggle="notify" data-placement="top" data-align="center" data-type="dark" data-icon="fas fa-envelope-open" data-animation-in="animated flipInX" data-animation-out="animated flipOutX">flipInX</button>
    <button class="btn btn-dark" data-toggle="notify" data-placement="top" data-align="center" data-type="dark" data-icon="fas fa-envelope-open" data-animation-in="animated zoomIn" data-animation-out="animated zoomOut">zoomIn</button>