MDB Toast vs Bootstrap Toast


Topic: MDB Toast vs Bootstrap Toast

pawled asked 1 months ago

https://mdbootstrap.com/snippets/standard/pawled/3303299

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


pawled commented 1 months ago

I have seen all docs at MDB website but I'm really confused. I can't change parts of included code properly.


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:

errorInstance.show();

Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • 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
Tags