Bootstrap 5 : Toasts


Table des matières

    Afficher la table des matières

Toasts

Le composant toast est comme une boîte d'alerte qui ne s'affiche que pendant quelques secondes lorsque quelque chose se produit (c'est-à-dire lorsque l'utilisateur clique sur un bouton, soumet un formulaire, etc.).

Toast Header 5 mins ago

Some text inside the toast body


Comment créer un toast

Pour créer un toast, utilisez la classe .toast et ajoutez un .toast-header et un .toast-body à l'intérieur.

Remarque : Les toasts sont masqués par défaut. Utilisez la classe .show si vous souhaitez l'afficher. Pour le fermer, utilisez un élément <button> et ajoutez data-bs-dismiss="toast" :

<div class="toast show">
  <div class="toast-header">
    Toast Header
    <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
  </div>
  <div class="toast-body">
    Some text inside the toast body
  </div>
</div>

Essayez-le vous-même →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h3>Toast Example</h3>
  <p>A toast is like an alert box that is only shown for a couple of seconds when something happens (i.e. when a user clicks on a button, submits a form, etc.).</p>
  <p>In this example, we use the .show class to always show the toast by default. You can close it by clicking on the close (x) icon inside the toast header.</p>
  
  <div class="toast show">
    <div class="toast-header">
      <strong class="me-auto">Toast Header</strong>
      <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
    </div>
    <div class="toast-body">
      <p>Some text inside the toast body</p>
    </div>
  </div>
</div>

</body>
</html>

Ouvrir un toast

Pour afficher un toast d'un simple clic sur un bouton, vous devez l'initialiser avec JavaScript : sélectionnez l'élément spécifié et appelez la méthode toast().

Le code suivant affichera tous les « toasts » dans le document lorsque vous cliquez sur un bouton :

Exemple

<script>
document.getElementById("toastbtn").onclick = function() {
  var toastElList = [].slice.call(document.querySelectorAll('.toast'))
  var toastList = toastElList.map(function(toastEl) {
    return new bootstrap.Toast(toastEl)
  })
  toastList.forEach(toast => toast.show())
}
</script>

Essayez-le vous-même →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h3>Toast Example</h3>
  <p>In this example, we use a button to show the toast message.</p>

  <button type="button" class="btn btn-primary" id="toastbtn">Show Toast</button>
  
  <div class="toast">
    <div class="toast-header">
      <strong class="me-auto">Toast Header</strong>
      <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
    </div>
    <div class="toast-body">
      <p>Some text inside the toast body</p>
    </div>
  </div>
</div>

<script>
document.getElementById("toastbtn").onclick = function() {
  var toastElList = [].slice.call(document.querySelectorAll('.toast'))
  var toastList = toastElList.map(function(toastEl) {
    return new bootstrap.Toast(toastEl)
  })
  toastList.forEach(toast => toast.show()) 
}
</script>

</body>
</html>