Minimal Toast Notification Plugin For Bootstrap - jQuery Bootoast

Bootoast is a small jQuery plugin which makes use of Bootstrap alerts component to create various types of toast messages on the webpage.

Key features:

• Custom themes: info, success, warning, danger.
• Custom positions.
• Auto dismiss after a timeout you specify.
• Custom notification icons based on Bootstrap Glyphicons.
• Compatible with Bootstrap 3 and 4.

Basic usage:

1. Load the required Bootstrap and Bootoast plugin's CSS files in the header of your html document.

<link href="bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="bootoast.css" rel="stylesheet" type="text/css">

2. Load jQuery library and the Bootoast plugin's script at the end of the document so your page loads faster.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="bootoast.js"></script>

3. Create basic toast notifications as follows:

bootoast.toast({
  message: 'This is an info toast message'
});

bootoast.toast({
  message: 'This is a success toast message',
  type: 'success'
});

bootoast.toast({
  message: 'This is a warning toast message',
  type: 'warning'
});

bootoast.toast({
  message: 'This is a danger toast message',
  type: 'danger'
});

4. Override the default notification icons.

bootoast.toast({
  message: 'This is an info toast message',
  icon: 'exclamation-sign' // Glyphicons name
});

5. Change the default position of the toast notifications.

bootoast.toast({

  message: 'This is an info toast message',

  // top-center, top-left, top-right
  // bottom-center, bottom-left, bottom-right
  position: 'bottom-center',
  
});

6. Specify the timeout in milliseconds that can be used to auto dismiss the toast notifications.

bootoast.toast({
  message: 'This is an info toast message',
  timeout: 2000,
  timeoutProgress: false, // [false, 'top', 'bottom', 'background']
});

7. Override the default animation duration in milliseconds.

bootoast.toast({
  message: 'This is an info toast message',
  animationDuration: 300,
});

8. If you want to create 'sticky' toast notifications.

bootoast.toast({
  message: 'This is an info toast message',
  dismissable: false
});

Change log:

2018-01-21

• a lot of fixes, codacy improvements, etc

---

This awesome jQuery plugin is developed by odahcam. For more Advanced Usages, please check the demo page or visit the official website.