Press "Enter" to skip to content

Corner Fixed Notifications Alerts With Bootstrap | BS4 Show Notification

Bootstrap Notification, is an easy-to-use jQuery plugin that uses the Bootstrap Alerts component to create static, rejectable, and stackable notification popups in the upper right corner of the page.

The jQuery plugin wrapper around Bootstrap 4 alerts, to create static notifications alerts using JavaScript.

Create Toaster Notifications with a Few Lines of Code | ToasterJS

How to make use of it:

1. Load the bootstrap-show-notification.js script in your Bootstrap undertaking.

<!-- Bootstrap Files -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/cdn/bootstrap.min.js"></script>
<!-- Bootstrap Files -->
<script src="/path/to/src/bootstrap-show-notification.js"></script>

2. Display a primary alert notification on the web page.

$.show<a href="#!">Notification</a>({
  body: "A Basic Notification"
})

3. HTML content is supported as nicely.

$.showNotification({
  body: "<h3>A Basic Notification</h3>"
})

4. Determine the notification sort:

$.showNotification({
  body: "A Basic Notification",
  type: "warning"
})

5. Determine how long it takes to auto dismiss.

$.showNotification({
  body: "A Basic Notification",
  duration: 3000
})

6. Determine the stack direction.

$.showNotification({
  body: "A Basic Notification",
  direction: "append"
})

7. Customize the looks of the notification popup.

$.showNotification({

  // max width
  maxWidth: "520px",

  // box shadow
  shadow: "0 2px 6px rgba(0,0,0,0.2)", 

  // z-index
  zIndex: 100,

  // margin
  margin: "1rem"
  
})

Fixed Notifications With Bootstrap Alerts, Bootstrap Show Notification Plugin/Github


See Demo And Download

Official Website(shaack): Click Here

This superior jQuery/javascript plugin is developed by shaack. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.