bootstrap-show-notification

This component is Bootstrap 4 only. For a Bootstrap 5 compatible package with similar functionality, see bootstrap-show-toast.

A jQuery plugin wrapper around Bootstrap 4 Alerts, to show them as toasts (also called notifications) dynamically from JavaScript.

=>

• Responsive and mobile friendly
• Needs no extra CSS

Try it

• Demo Page

Installation

• npm package

npm install bootstrap-show-notification

Usage

<script src="./node_modules/bootstrap-show-notification/src/bootstrap-show-notification.js"></script>
<script>
    // simple example
    $("#button-show-simple").click(function () {
        $.showNotification({body: "Hello Notification!"})
    })
    // type info and more complex body
    $("#button-show-info").click(function () {
        $.showNotification({
            body: "<h3>For your Info</h3>This notification has a title and a body and more text than the previous one.", type: "info"
        })
    })
    // type danger
    $("#button-show-danger").click(function () {
        $.showNotification({
            body: "Danger!", type: "danger"
        })
    })
    // type secondary and sticky
    $("#button-show-sticky").click(function () {
        $.showNotification({
            body: "This notification will stay", type: "secondary", duration: 0
        })
    })
</script>

Props (defaults)

this.props = {
    body: "", // the text, shown
    type: "primary", // the appearance
    duration: 5500, // duration till auto-hide, set to `0` to disable auto-hide
    maxWidth: "520px", // the notification maxWidth
    shadow: "0 2px 6px rgba(0,0,0,0.2)", // the box-shadow
    zIndex: 100,
    margin: "1rem", // the margin (above maxWidth)
    direction: "prepend" // or "append", the stack direction
}

Documentation

• Repository and documentation

More Bootstrap extensions

Check out my further Bootstrap extensions