CodeSeven / toastr

Simple javascript toast notifications

Home Page:http://www.toastrjs.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

CSS class conflict with bootstrap 4.5

marc-schieferdecker opened this issue · comments

For quite a while now toasts are available in Bootstrap also.
Bootstrap uses a css class named "toast" and Toastr uses this class also".

Please rename the css classes Toastr uses to "toastr" so the conflict with bootstrap will be resolved.

Thank you.

I have a same problem.

I have a same problem.

A solution is to load the Toastr CSS after the Bootstrap CSS.

But that does not solve the conflict. Nevertheless the css class names should be renamed.

I could not get my toastr to go full width because I saw bootstrap was setting a max-width on toast-container using !important so it didnt matter what order I put my scripts in.

My solution was to unset max width:
#toast-container.toast-top-full-width > div {
max-width: none !important;
}

A version using toastr instead of toast can be found here: https://github.com/petekeller2/toastr/tree/master/build