search

CodeSeven / toastr

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

Toastr don't work with Bootstrap 4.2 #599

Open ghost opened 5 years ago

ghost commented 5 years ago

In bootstrap 4.2 new component Toast https://blog.getbootstrap.com/2018/12/21/bootstrap-4-2-1/ which overwrites your styles..

So Toastr don't work now.

Can it be fixed?

Thank you

primaryobjects commented 5 years ago

A quick work-around fix is to do the following:

toastr.options.toastClass = 'toastr';
cgatesman commented 5 years ago

FYI, the quick work-around completely breaks Toastr CSS styling. You have to reimplement the styling for .toastr.

burtonator commented 5 years ago

FYI this worked:

toastr.options.toastClass = 'toastr';

like above BUT I had to adjust my own custom CSS which only took a second.

yay for global variable names ! (sarcasm)

insidelogic commented 5 years ago

If you're working from the LESS or SCSS files from bootstrap you can skip the bootstrap toast styles by importing just the styles you want and ignoring their toast styles.

Easiest way is to copy their bootstrap.{scss/less} file to your css folder, and change their imports, leaving out toasts:

@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/root";
@import "~bootstrap/scss/reboot";
@import "~bootstrap/scss/type";
...

Above i'm using Webpack with npm bootstrap package, so "~bootstrap/scss" refers to the bootstrap folder in node_modules. You can change it to a relative path.

asksnbb commented 4 years ago

Try this Bootstrap toast with sound