Topic: MDB Toast vs Bootstrap Toast

pawled free asked 2 years 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 2 years 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();

Michał Duszak staff answered 2 years 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 free commented 2 years ago

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



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: 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