Bootstrap Alerts MDB Pro component

Bootstrap alerts are feedback messages which are displayed after specific actions preceded by the user. Length of the text is not limited.

With the right use of colors, they add some emotional weight to our information, ranging from a simple warning to critical system failure or from an operation success to a neutral information.

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

Basic examples 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>

Usage via jQuery

Click me!

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

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


Default options

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

Other options

// Display a warning toast, with no title
toastr.warning('My name is Inigo Montoya. You killed my father, prepare to die!')

// Display a success toast, with a title
toastr.success('Have fun storming the castle!', 'Miracle Max Says')

// Display an error toast, with a title
toastr.error('I do not think that word means what you think it means.', 'Inconceivable!')

// Immediately remove current toasts without using animation

// Remove current toasts using animation

// Override global options
toastr.success('We do have the Kapua suite available.', 'Turtle Bay Resort', {timeOut: 5000})

Alert creator MDB Pro component

toastr creator

Toast Type

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"

Default Bootstrap alerts

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