Topic: MDB Toast vs Bootstrap Toast
I want to change Bootstrap Toast for MDB one. How to do it?
Here's documentation for MDB Toast. https://mdbootstrap.com/docs/standard/components/toasts/
You have to replace old BS Toasts with MDB Ones. You also have to delete loading of bootstrap css and js files. Use mdb files instead of bootstrap files, so you won't get into trouble.
Here I have added buttons which trigger certain toasts, so you can see how it's done. I also had to delete BS files - they were overwriting styles and scripts. https://mdbootstrap.com/snippets/standard/m-duszak/3307377#js-tab-view
This is your Toast HTML:
<div class="toast fade mx-auto" id="basic-error" role="alert" aria-live="assertive" aria-atomic="true" data-mdb-autohide="true" data-mdb-delay="2000" data-mdb-position="top-right" data-mdb-append-to-body="true" data-mdb-stacking="true" data-mdb-width="350px" data-mdb-color="danger" > <div class="toast-header text-white"> <strong class="me-auto">MDBootstrap</strong> <small>11 mins ago</small> <button type="button" class="btn-close btn-close-white" data-mdb-dismiss="toast" aria-label="Close"></button> </div> <div class="toast-body text-white">Error message</div> </div>
This is how you reference it in JS:
let errorInstance = mdb.Toast.getInstance(document.getElementById('basic-error'));
Then in your custom validation, you have to use show() method just right where you want to show the toast:
Services & Consulting
Hire our experts to help you design or build a dedicated project.
- User: Free
- Premium support: No
- Technology: MDB Standard
- MDB Version: MDB5 3.9.0
- Device: Any
- Browser: Any
- OS: Any
- Provided sample code: No
- Provided link: Yes