Categories: CSSScriptWeb Design

Advanced Alert Notification System For Bootstrap 5 – AvalynxAlert.js

AvalynxAlert is a lightweight JavaScript notification library that provides customizable, positioned alerts to enhance user feedback in your applications.

It integrates with Bootstrap 5.3 or higher, giving you a range of alert options and complete control over their appearance and behavior.

Table of Contents

Toggle

How to use it:

1. To get started, make sure you have the latest Bootstrap 5 framework installed in your project.

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/bootstrap.bundle.min.js"></script>

2. Load the AvalynxAlert’s JavaScript and Stylesheet.

<link href="/dist/css/avalynx-alert.css" rel="stylesheet">
<script src="/dist/js/avalynx-alert.js"></script>

3. You can also install and import the AvalynxAlert with NPM.

# NPM
$ npm install avalynx-alert
import { AvalynxAlert } from 'avalynx-alert';
import 'avalynx-alert/dist/css/avalynx-alert.min.css';

4. Create a new AvalynxAlert instance, define the alert message, and specify the notification type (primary, secondary, success, danger, warning, info, light, or dark) as follows:

new AvalynxAlert('Alert Message Here', 'success');

5. Customize the alert message by overriding the default options listed blow:

new AvalynxAlert('Alert Message', 'success',{

    // auto-dismiss after this timeout
    duration: 5000,
    autoClose: true,

    // 'top-left', 'top-center', 'top-right', 'bottom-left', 'bottom-center', 'bottom-right'. Default is 'top-center'
    position: 'top-center',

    // is dismissable?
    closeable: true,

    // max width of the alert box
    width: '400px',

    // callback
    onClose: null,
    
}),

Changelog:

v1.0.0 (06/04/2025)

  • update

v0.0.9 (03/08/2025)

  • assetscomposer.json added

v0.0.8 (05/29/2024)

  • Bugfix

v0.0.6 (05/27/2024)

  • Code optimization

The post Advanced Alert Notification System For Bootstrap 5 – AvalynxAlert.js appeared first on CSS Script.