Bootstrap 5.2 / Componenten

Toasts

Stuur pushmeldingen naar je bezoekers met een toast, een lichtgewicht en eenvoudig aan te passen meldingsbericht.

Toasts zijn lichtgewicht meldingen die de pushmeldingen nabootsen die door mobiele en desktopbesturingssystemen populair zijn gemaakt. Ze zijn met flexbox gebouwd, dus ze zijn eenvoudig uit te lijnen en te positioneren.

Overzicht

Dingen om te weten bij het gebruik van de toast-plugin:

Toasts zijn om prestatieredenen opt-in, dus je moet ze zelf initialiseren.
Toasts verbergen zichzelf automatisch als je geen autohide: false opgeeft.

Let op

Animaties en overgangen houden rekening met de instelling prefers-reduced-motion. Heeft een bezoeker in het besturingssysteem om minder beweging gevraagd, dan vallen overgangen weg.

Voorbeelden

Basis

Om uitbreidbare en voorspelbare toasts te stimuleren, raden we een kop en body aan. Toast-koppen gebruiken display: flex, wat content eenvoudig laat uitlijnen dankzij onze margin- en flexbox-utilities.

Toasts zijn zo flexibel als je nodig hebt en vereisen heel weinig markup. Minimaal hebben we één element nodig met je "getoaste" content, en we raden sterk een sluitknop aan.

HTML

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2020%2020%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22false%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23007aff%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%2210%22%3Efalse%3C%2Ftext%3E%3C%2Fsvg%3E" width="20" height="20" class="rounded me-2" alt="false">
    <strong class="me-auto">Bootstrap</strong>
    <small>11 minuten geleden</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Sluiten"></button>
  </div>
  <div class="toast-body">
    Hallo wereld! Dit is een toast-bericht.
  </div>
</div>

Let op

Voorheen voegden onze scripts dynamisch de klasse .hide toe om een toast volledig te verbergen (met display:none, in plaats van alleen met opacity:0). Dat is nu niet meer nodig. Voor achterwaartse compatibiliteit blijft ons script de klasse echter schakelen (ook al is dat praktisch niet nodig) tot de volgende hoofdversie.

Live voorbeeld

Klik op de knop hieronder om een toast te tonen (met onze utilities in de rechterbenedenhoek gepositioneerd) die standaard verborgen is.

Hallo wereld! Dit is een toast-bericht.

HTML

<button type="button" class="btn btn-primary" id="liveToastBtn">Toon 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 minuten geleden</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Sluiten"></button>
    </div>
    <div class="toast-body">
      Hallo wereld! Dit is een toast-bericht.
    </div>
  </div>
</div>

We gebruiken de volgende JavaScript om onze live toast-demo te activeren:

const toastTrigger = document.getElementById('liveToastBtn')
const toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
  toastTrigger.addEventListener('click', () => {
    const toast = new bootstrap.Toast(toastLiveExample)

    toast.show()
  })
}

Doorschijnend

Toasts zijn licht doorschijnend, zodat ze opgaan in wat eronder ligt.

HTML

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2020%2020%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22false%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23007aff%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%2210%22%3Efalse%3C%2Ftext%3E%3C%2Fsvg%3E" width="20" height="20" class="rounded me-2" alt="false">
    <strong class="me-auto">Bootstrap</strong>
    <small class="text-muted">11 minuten geleden</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Sluiten"></button>
  </div>
  <div class="toast-body">
    Hallo wereld! Dit is een toast-bericht.
  </div>
</div>

Stapelen

Je kunt toasts stapelen door ze in een toast-container te wikkelen, die verticaal wat tussenruimte toevoegt.

HTML

<div class="toast-container position-static">
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2020%2020%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22false%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23007aff%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%2210%22%3Efalse%3C%2Ftext%3E%3C%2Fsvg%3E" width="20" height="20" class="rounded me-2" alt="false">
      <strong class="me-auto">Bootstrap</strong>
      <small class="text-muted">zojuist</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Sluiten"></button>
    </div>
    <div class="toast-body">
      Zie je? Precies zo.
    </div>
  </div>

  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2020%2020%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22false%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23007aff%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%2210%22%3Efalse%3C%2Ftext%3E%3C%2Fsvg%3E" width="20" height="20" class="rounded me-2" alt="false">
      <strong class="me-auto">Bootstrap</strong>
      <small class="text-muted">2 seconden geleden</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Sluiten"></button>
    </div>
    <div class="toast-body">
      Let op: toasts stapelen automatisch
    </div>
  </div>
</div>

Eigen content

Pas je toasts aan door subcomponenten te verwijderen, ze bij te schaven met utilities, of door je eigen markup toe te voegen. Hier hebben we een eenvoudiger toast gemaakt door de standaard-.toast-header te verwijderen, een eigen verbergicoon uit Bootstrap Icons toe te voegen en met een paar flexbox-utilities de layout aan te passen.

HTML

<div class="toast align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
      Hallo wereld! Dit is een toast-bericht.
    </div>
    <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Sluiten"></button>
  </div>
</div>

Je kunt ook extra bedieningselementen en componenten aan toasts toevoegen.

HTML

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-body">
    Hallo wereld! Dit is een toast-bericht.
    <div class="mt-2 pt-2 border-top">
      <button type="button" class="btn btn-primary btn-sm">Actie ondernemen</button>
      <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">Sluiten</button>
    </div>
  </div>
</div>

Kleurschema's

Voortbouwend op het voorbeeld hierboven kun je met onze kleur- en achtergrond-utilities verschillende kleurschema's voor toasts maken. Hier hebben we .text-bg-primary aan de .toast toegevoegd, en daarna .btn-close-white aan onze sluitknop. Voor een strakke rand verwijderen we de standaardrand met .border-0.

HTML

<div class="toast align-items-center text-bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
      Hallo wereld! Dit is een toast-bericht.
    </div>
    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Sluiten"></button>
  </div>
</div>

Plaatsing

Plaats toasts met eigen CSS waar je ze nodig hebt. Rechtsboven wordt vaak voor meldingen gebruikt, net als middenboven. Als je altijd maar één toast tegelijk toont, zet de positioneringsstijlen dan direct op de .toast.

HTML

<form>
  <div class="mb-3">
    <label for="selectToastPlacement">Toast-plaatsing</label>
    <select class="form-select mt-2" id="selectToastPlacement">
      <option value="" selected>Kies een positie...</option>
      <option value="top-0 start-0">Linksboven</option>
      <option value="top-0 start-50 translate-middle-x">Middenboven</option>
      <option value="top-0 end-0">Rechtsboven</option>
      <option value="top-50 start-0 translate-middle-y">Links midden</option>
      <option value="top-50 start-50 translate-middle">Midden</option>
      <option value="top-50 end-0 translate-middle-y">Rechts midden</option>
      <option value="bottom-0 start-0">Linksonder</option>
      <option value="bottom-0 start-50 translate-middle-x">Middenonder</option>
      <option value="bottom-0 end-0">Rechtsonder</option>
    </select>
  </div>
</form>
<div aria-live="polite" aria-atomic="true" class="bg-dark position-relative bd-example-toasts">
  <div class="toast-container p-3" id="toastPlacement">
    <div class="toast">
      <div class="toast-header">
        <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2020%2020%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22false%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23007aff%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%2210%22%3Efalse%3C%2Ftext%3E%3C%2Fsvg%3E" width="20" height="20" class="rounded me-2" alt="false">
        <strong class="me-auto">Bootstrap</strong>
        <small>11 minuten geleden</small>
      </div>
      <div class="toast-body">
        Hallo wereld! Dit is een toast-bericht.
      </div>
    </div>
  </div>
</div>

Voor systemen die meer meldingen genereren, overweeg een omhullend element zodat ze eenvoudig kunnen stapelen.

HTML

<div aria-live="polite" aria-atomic="true" class="position-relative">
  <!-- Position it: -->
  <!-- - `.toast-container` for spacing between toasts -->
  <!-- - `top-0` & `end-0` to position the toasts in the upper right corner -->
  <!-- - `.p-3` to prevent the toasts from sticking to the edge of the container  -->
  <div class="toast-container top-0 end-0 p-3">

    <!-- Then put toasts within -->
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2020%2020%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22false%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23007aff%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%2210%22%3Efalse%3C%2Ftext%3E%3C%2Fsvg%3E" width="20" height="20" class="rounded me-2" alt="false">
        <strong class="me-auto">Bootstrap</strong>
        <small class="text-muted">zojuist</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Sluiten"></button>
      </div>
      <div class="toast-body">
        Zie je? Precies zo.
      </div>
    </div>

    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2020%2020%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22false%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23007aff%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%2210%22%3Efalse%3C%2Ftext%3E%3C%2Fsvg%3E" width="20" height="20" class="rounded me-2" alt="false">
        <strong class="me-auto">Bootstrap</strong>
        <small class="text-muted">2 seconden geleden</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Sluiten"></button>
      </div>
      <div class="toast-body">
        Let op: toasts stapelen automatisch
      </div>
    </div>
  </div>
</div>

Je kunt ook creatief worden met flexbox-utilities om toasts horizontaal en/of verticaal uit te lijnen.

HTML

<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center w-100">

  <!-- Then put toasts within -->
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2020%2020%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22false%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23007aff%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%2210%22%3Efalse%3C%2Ftext%3E%3C%2Fsvg%3E" width="20" height="20" class="rounded me-2" alt="false">
      <strong class="me-auto">Bootstrap</strong>
      <small>11 minuten geleden</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Sluiten"></button>
    </div>
    <div class="toast-body">
      Hallo wereld! Dit is een toast-bericht.
    </div>
  </div>
</div>

Toegankelijkheid

Toasts zijn bedoeld als kleine onderbrekingen voor je bezoekers of gebruikers. Om mensen met schermlezers en vergelijkbare hulptechnologieën te helpen, hoor je je toasts in een aria-live-regio te wikkelen. Wijzigingen in live regio's (zoals het injecteren of bijwerken van een toast-component) worden automatisch door schermlezers aangekondigd, zonder dat de focus van de gebruiker verplaatst hoeft te worden of de gebruiker anderszins onderbroken wordt. Voeg daarnaast aria-atomic="true" toe om te zorgen dat de hele toast altijd als één (atomaire) eenheid wordt aangekondigd, in plaats van alleen wat er gewijzigd is (wat problemen kan opleveren als je slechts een deel van de toast-content bijwerkt, of dezelfde toast-content later opnieuw toont). Is de informatie belangrijk voor het proces, bijvoorbeeld bij een lijst met fouten in een formulier, gebruik dan het alert-component in plaats van een toast.

Let op: de live regio moet in de markup aanwezig zijn voordat de toast wordt gegenereerd of bijgewerkt. Genereer je beide dynamisch tegelijk en injecteer je ze in de pagina, dan worden ze doorgaans niet door hulptechnologieën aangekondigd.

Je moet ook het niveau van role en aria-live op de content afstemmen. Gaat het om een belangrijk bericht zoals een fout, gebruik dan role="alert" aria-live="assertive"; gebruik anders de attributen role="status" aria-live="polite".

Verandert de content die je toont, werk dan ook de delay-timeout bij, zodat gebruikers genoeg tijd hebben om de toast te lezen.

HTML

<div class="toast" role="alert" aria-live="polite" aria-atomic="true" data-bs-delay="10000">
  <div role="alert" aria-live="assertive" aria-atomic="true">...</div>
</div>

Gebruik je autohide: false, dan moet je een sluitknop toevoegen zodat gebruikers de toast kunnen wegklikken.

HTML

<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-bs-autohide="false">
  <div class="toast-header">
    <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2020%2020%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22false%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23007aff%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%2210%22%3Efalse%3C%2Ftext%3E%3C%2Fsvg%3E" width="20" height="20" class="rounded me-2" alt="false">
    <strong class="me-auto">Bootstrap</strong>
    <small>11 minuten geleden</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Sluiten"></button>
  </div>
  <div class="toast-body">
    Hallo wereld! Dit is een toast-bericht.
  </div>
</div>

Hoewel het technisch mogelijk is om focusbare/actiegerichte bedieningselementen (zoals extra knoppen of links) in je toast te zetten, kun je dat bij toasts die zichzelf automatisch verbergen beter vermijden. Zelfs met een lange delay-timeout kunnen toetsenbord- en hulptechnologiegebruikers het lastig vinden om de toast op tijd te bereiken (omdat toasts geen focus krijgen wanneer ze worden getoond). Moet je per se meer bedieningselementen hebben, gebruik dan een toast met autohide: false.

CSS

Variabelen

Nieuw in v5.2.0

Als onderdeel van Bootstraps groeiende aanpak met CSS-variabelen gebruiken toasts nu lokale CSS-variabelen op .toast, voor betere aanpassingen in realtime. De waarden voor de CSS-variabelen worden via Sass ingesteld, dus aanpassen via Sass wordt nog steeds ondersteund.

Standaardwaarden: zie scss/_toasts.scss in de Bootstrap-broncode.

Sass-variabelen

Standaardwaarden: zie scss/_variables.scss in de Bootstrap-broncode.

Gebruik

Initialiseer toasts via JavaScript:

const toastElList = document.querySelectorAll('.toast')
const toastList = [...toastElList].map(toastEl => new bootstrap.Toast(toastEl, option))

Triggers

Klik-om-te-sluiten werkt automatisch via de dismiss data-API, zonder dat je zelf JavaScript hoeft te initialiseren. Gebruik het attribuut data-bs-dismiss="toast" op een knop binnen het component om het te sluiten.

Opties

De meeste plugins kun je aanzetten zonder JavaScript te schrijven, puur met een data-bs-*-attribuut als trigger. Al deze data-attributen zijn genamespaced met bs-, zodat ze niet botsen met andere scripts.

Naam	Type	Standaard	Omschrijving
`animation`	boolean	`true`	Past een CSS-fade-transitie op de toast toe.
`autohide`	boolean	`true`	Verbergt de toast automatisch na de vertraging.
`delay`	number	`5000`	Vertraging in milliseconden voordat de toast wordt verborgen.

Methodes

Gevaar

Deze methode start een overgang. Roep hem niet opnieuw aan zolang de vorige nog bezig is: dat levert onverwacht gedrag op. Wacht op het bijbehorende gebeurtenis voordat je opnieuw aanroept.

Methode	Omschrijving
`dispose`	Verbergt de toast van een element. Je toast blijft in de DOM, maar wordt niet meer getoond.
`getInstance`	Statische methode waarmee je de toast-instantie kunt ophalen die bij een DOM-element hoort. Bijvoorbeeld: `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getInstance(myToastEl)` Geeft een Bootstrap-toast-instantie terug.
`getOrCreateInstance`	Statische methode waarmee je de toast-instantie kunt ophalen die bij een DOM-element hoort, of een nieuwe kunt aanmaken als die nog niet was geïnitialiseerd. `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)` Geeft een Bootstrap-toast-instantie terug.
`hide`	Verbergt de toast van een element. Keert terug naar de aanroeper voordat de toast daadwerkelijk verborgen is (dus vóór de gebeurtenis `hidden.bs.toast`). Je moet deze methode handmatig aanroepen als je `autohide` op `false` hebt gezet.
`isShown`	Geeft een boolean terug op basis van de zichtbaarheidsstatus van de toast.
`show`	Toont de toast van een element. Keert terug naar de aanroeper voordat de toast daadwerkelijk getoond is (dus vóór de gebeurtenis `shown.bs.toast`). Je moet deze methode handmatig aanroepen, anders verschijnt je toast niet.

Gebeurtenissen

Gebeurtenis	Omschrijving
`hide.bs.toast`	Deze gebeurtenis wordt direct afgevuurd wanneer de instantiemethode `hide` is aangeroepen.
`hidden.bs.toast`	Deze gebeurtenis wordt afgevuurd wanneer de toast volledig voor de gebruiker verborgen is.
`show.bs.toast`	Deze gebeurtenis wordt direct afgevuurd wanneer de instantiemethode `show` wordt aangeroepen.
`shown.bs.toast`	Deze gebeurtenis wordt afgevuurd wanneer de toast zichtbaar is gemaakt voor de gebruiker.

const myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', () => {
  // doe iets...
})