Toasts ^commun

Les toasts sont des messages de notification légers facilement personnalisables.
Leur fermeture est paramétrée au bout d'un certain délai mais il est possible de les refermer en cliquant sur la croix de fermeture.
L'activation JS est nécessaire.

Voici la structure html d'un toast : un header (avec bouton de fermeture) et un body.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small>11 mins ago</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
        Hello, world! This is a toast message.
    </div>
</div>

<button type="button" class="btn btn-primary" id="liveToastBtn" data-bs-toggle="toast" data-bs-target="#liveToast">Show live toast</button>

<div class="toast-container position-fixed bottom-0 end-0 p-3">
    <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
            <img src="..." class="rounded me-2" alt="...">
            <strong class="me-auto">Bootstrap</strong>
            <small>11 mins ago</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body">
        Hello, world! This is a toast message.
        </div>
    </div>
</div>

De nombreuses possibilités existent (empilement des toasts, positionnement des toasts dans la fenêtre, personnalisation, ...). En savoir plus.