<div

                class="toast show fade text-white mx-auto"

                role="alert"

                aria-live="assertive"

                aria-atomic="true"

                data-mdb-color="success"

                data-mdb-delay="2000"

                data-mdb-position="top-right"

                data-mdb-stacking="true"

                id="position-example-toast"

        >

            <div class="toast-header text-white">

                <i class="fas fa-check fa-lg me-2"></i>

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

                <p>New achievement Unlocked!</p>

                <small>this toast is on the top left not the top right.</small>

            </div>

        </div>