Move Toast to top center

Targets Web
1

I am using the Toast class in a web app. Would like to move the toast to the Top Center of the web page. I think this is the line that I need to modify, this.mToastWrapper.classList.add(‘toast-container’, ‘top-0’, ‘end-0’, ‘p-3’);
But not sure what to change it to. Any suggestions?
Thanks

2

I hope you are using the toast from issue #75360 as that is the one updated for Bootstrap 5. I’ll ping Geoff to remind him to replace the old version shipped.

You can see the options available from Boostrap here: Bootstrap Toast Component - Examples & Tutorial - FastBootstrap

If you want top-center you need to change the kJSCode line you mentioned to

this.mToastWrapper.classList.add('toast-container', 'top-0', 'start-50', 'translate-middle-x', 'p-3');
3

Yes I am using the Bootstrap 5 version
That change worked perfectly. Thanks

1 Like