MDB Toast vs Bootstrap Toast


Topic: MDB Toast vs Bootstrap Toast

pawled pro premium priority asked 8 months ago

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

I want to change Bootstrap Toast for MDB one. How to do it?


Michał Duszak staff answered 8 months ago

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 pro premium priority commented 8 months ago

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


Michał Duszak staff answered 8 months ago

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.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 3.9.0
  • Device: Any
  • Browser: Any
  • OS: Any
  • Provided sample code: No
  • Provided link: Yes
Tags