Make toastr alerts look like bootstrap alerts

Make toastr alerts look like bootstrap alerts

I’d like to make toastr’s popup look the same as, or very close to, Bootstrap alerts. How can I do this?

Solutions/Answers:

Solution 1:

Include the CSS for the Bootstrap alerts, then in your toastr options, change the values of toastClass and iconClasses:

toastr.options = {
    toastClass: 'alert',
    iconClasses: {
        error: 'alert-error',
        info: 'alert-info',
        success: 'alert-success',
        warning: 'alert-warning'
    }
},

Then in toastr’s CSS, remove the dropshadow from #toast-container > div so that it ends up looking like:

#toast-container > div {
    width: 300px;
}

You could leave the padding if you wanted, or add that to your own CSS file instead of editing toastr’s (probably best, just make sure yours is loaded afterwards).

Solution 2:

To make them the same as bootstrap 3.2.0, i used a combination of the selected answer – although alert-error should be alert-danger – and this gist, which replaces the icons with fontawesome icons

https://gist.github.com/askehansen/9528424

To make them look exactly the same i also

  • set the opacity of the toasts to 1
  • changed the title and message colour to match bootstrap
Related:  How to use Bootstrap modal using the anchor tag for Register?

css is

#toast-container > div {
    opacity: 1;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    filter: alpha(opacity=100);
}

#toast-container > .alert {
    background-image: none !important;
}

#toast-container > .alert:before {
    position: fixed;
    font-family: FontAwesome;
    font-size: 24px;
    float: left;
    color: #FFF;
    padding-right: 0.5em;
    margin: auto 0.5em auto -1.5em;
}

#toast-container > .alert-info:before {
    content: "\f05a";
}
#toast-container > .alert-info:before,
#toast-container > .alert-info {
    color: #31708f;
}

#toast-container > .alert-success:before {
    content: "\f00c";
}
#toast-container > .alert-success:before,
#toast-container > .alert-success {
    color: #3c763d;
}

#toast-container > .alert-warning:before {
    content: "\f06a";
}
#toast-container > .alert-warning:before,
#toast-container > .alert-warning {
    color: #8a6d3b;
}

#toast-container > .alert-danger:before {
    content: "\f071";
}
#toast-container > .alert-danger:before,
#toast-container > .alert-danger {
    color: #a94442;
}

Solution 3:

This post is a little old, but I thought I would add another possible solution.

I found the default bootstrap “alert” color scheme was a little light for the toastr messages. I used a custom LESS file and did the following to darken them.

#toast-container {
   @darken-amount: 10%;

   .toast-error {
      background-color: darken(@brand-danger, @darken-amount);
   }

   .toast-warning {
      background-color: darken(@brand-warning, @darken-amount);
   }

   .toast-success {
      background-color: darken(@brand-success, @darken-amount);
   }

   .toast-info {
     background-color: darken(@brand-info, @darken-amount);
   }
}

Optionally, you can also change the color of the text in the message:

.toast-message {
   color: #000;
}

Related:  Bootstrap 3 Glyphicons CDN

References