Make toastr alerts look like bootstrap alerts

twitter-bootstrap toastr
Sean Kearon picture Sean Kearon · Feb 25, 2013 · Viewed 25.6k times · Source

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

Answer

frostyterrier picture frostyterrier · Feb 25, 2013

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

Related questions

Center a column using Twitter Bootstrap 3

How do I center a div of one column size within the container (12 columns) in Twitter Bootstrap 3? I want a div, with a class .centered to be centered within the container. I may use a row if there are multiple …

Read More
How to open a Bootstrap modal window using jQuery?

I'm using Twitter Bootstrap modal window functionality. When someone clicks submit on my form, I want to show the modal window upon clicking the "submit button" in the form. <form id="myform" class="form-wizard"> <h2 class="form-wizard-heading"&…

Read More
vertical-align with Bootstrap 3

I'm using Twitter Bootstrap 3, and I have problems when I want to align vertically two div, for example — JSFiddle link: The grid system in Bootstrap uses float: left, not display:inline-block, so the property vertical-align doesn't work. I tried using …

Read More