Make toastr alerts look like bootstrap alerts

Question

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

Answer 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).