I've already talked about my "toaster" library in a previous article. Today, I've released a rather nice update that makes the Bootstrap toasts stack much nicer.

What is the issue?

As strange as it may sound, Bootstrap toast stacks are not well-designed for animated toasts (in my opinion, anyway...). This means that it looks great for static toasts, but as soon as you try to add or remove toasts in them, they move in a very "jumpy" way due to the display: none being applied at the end of the animation.

This can be seen in the codepen below

What is the solution?

The solution is simply to animate the margin (top or bottom, depending of the position of the order of your stack) by the height of the toast. This require disabling the display:none being applied by default and in my case, it's not an issue, since I'm working with dynamic toasts that get removed from the dom anyway (after some delay...).

---

These changes have already been integrated in my bs-companion library and can be seen lives here.