search

CodeSeven / toastr

Simple javascript toast notifications
http://www.toastrjs.com
MIT License
11.9k stars 2.04k forks source link

CSS class conflict with bootstrap 4.5 #654

Open marc-schieferdecker opened 4 years ago

marc-schieferdecker commented 4 years ago

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.

SungKyung-Kim commented 3 years ago

I have a same problem.

marc-schieferdecker commented 3 years ago

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.

kellielellie1 commented 3 years ago

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;

}

petekeller2 commented 3 years ago

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