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

<button class="btn btn-secondary" data-toggle="notify" data-placement="top" data-align="left" data-type="dark" data-icon="far 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="far 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="far 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="far 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="far 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="far fa-envelope-open">Bottom Right</button>

Options

Colors

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

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

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

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

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

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

<button class="btn btn-dark" data-toggle="notify" data-placement="top" data-align="center" data-type="dark" data-icon="far 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.

<button class="btn btn-dark" data-toggle="notify" data-placement="top" data-align="center" data-type="dark" data-icon="far 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="far 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="far 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="far 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="far fa-envelope-open" data-animation-in="animated zoomIn" data-animation-out="animated zoomOut">zoomIn</button>
Summary