Bootstrap Notification

Additional resources: Have a look at our tutorial about Web Push notifications

Basic examples

Bootstrap notification is a set of components which displays a static information or one generated in response to particular user on-site behavior.

Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the four required contextual classes (e.g., .alert-success). For inline dismissal, use the alerts jQuery plugin.

<div class="alert alert-primary" role="alert">
  This is a primary alert—check it out!
<div class="alert alert-secondary" role="alert">
  This is a secondary alert—check it out!
<div class="alert alert-success" role="alert">
  This is a success alert—check it out!
<div class="alert alert-danger" role="alert">
  This is a danger alert—check it out!
<div class="alert alert-warning" role="alert">
  This is a warning alert—check it out!
<div class="alert alert-info" role="alert">
  This is a info alert—check it out!
<div class="alert alert-light" role="alert">
  This is a light alert—check it out!
<div class="alert alert-dark" role="alert">
  This is a dark alert—check it out!

Notification additional content

<div class="alert alert-success" role="alert">
  <h4 class="alert-heading">Well done!</h4>
  <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
  <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>

Notification dismissing

Using the alert JavaScript plugin, it’s possible to dismiss any alert inline. Here’s how:

  • Be sure you’ve loaded the alert plugin, or the compiled Bootstrap JavaScript.
  • Add a dismiss button and the .alert-dismissible class, which adds extra padding to the right of the alert and positions the .close button.
  • On the dismiss button, add the data-dismiss="alert" attribute, which triggers the JavaScript functionality. Be sure to use the <button> element with it for proper behavior across all devices.
  • To animate alerts when dismissing them, be sure to add the .fade and .show classes.

You can see this in action with a live demo:

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.

Material design notifications MDB Pro component

Info message Warning message Success message Error message
<!--Info message-->
<a class="btn btn-info" onclick="'Hi! I am info message.');">Info message</a>
<!--Warning message-->
<a class="btn btn-warning" onclick="toastr.warning('Hi! I am warning message.');">Warning message</a>
<!--Success message-->
<a class="btn btn-success" onclick="toastr.success('Hi! I am success message.');">Success message</a>
<!--Error message-->
<a class="btn btn-danger" onclick="toastr.error('Hi! I am error message.');">Error message</a>

Alert creator MDB Pro component

toastr creator

Toast Type

Click me!

$("#alert-target").click(function () {
    toastr["info"]("I was launched via jQuery!")

toastr.options = {
  "closeButton": false,
  "debug": false,
  "newestOnTop": false,
  "progressBar": false,
  "positionClass": "toast-top-right",
  "preventDuplicates": false,
  "onclick": null,
  "showDuration": 300,
  "hideDuration": 1000,
  "timeOut": 5000,
  "extendedTimeOut": 1000,
  "showEasing": "swing",
  "hideEasing": "linear",
  "showMethod": "fadeIn",
  "hideMethod": "fadeOut"

<a class="btn btn-info btn-lg" id="alert-target" >Click me!</a>