Bootstrap 5.2 / Componenten

Alerts

Geef contextuele feedbackberichten bij veelvoorkomende gebruikersacties met het handvol beschikbare en flexibele alert-berichten.

Voorbeelden

Alerts zijn geschikt voor tekst van elke lengte, plus een optionele sluitknop. Gebruik voor de juiste styling een van de acht verplichte contextuele klassen (bijv. .alert-success). Voor het inline wegklikken gebruik je de alerts-JavaScript-plugin.

HTML

<div class="alert alert-primary" role="alert">
  Een eenvoudige primary-alert — bekijk hem eens!
</div>
<div class="alert alert-secondary" role="alert">
  Een eenvoudige secondary-alert — bekijk hem eens!
</div>
<div class="alert alert-success" role="alert">
  Een eenvoudige success-alert — bekijk hem eens!
</div>
<div class="alert alert-danger" role="alert">
  Een eenvoudige danger-alert — bekijk hem eens!
</div>
<div class="alert alert-warning" role="alert">
  Een eenvoudige warning-alert — bekijk hem eens!
</div>
<div class="alert alert-info" role="alert">
  Een eenvoudige info-alert — bekijk hem eens!
</div>
<div class="alert alert-light" role="alert">
  Een eenvoudige light-alert — bekijk hem eens!
</div>
<div class="alert alert-dark" role="alert">
  Een eenvoudige dark-alert — bekijk hem eens!
</div>

Let op

Gebruik kleur niet als enige manier om iets duidelijk te maken. Zorg voor extra aanwijzingen (tekst, een icoon, een ander contrast), zodat mensen die kleuren niet of anders waarnemen de informatie ook krijgen.

Live voorbeeld

Klik op de knop hieronder om een alert te tonen (om te beginnen verborgen met inline stijlen), en klik hem daarna weg (en vernietig hem) met de ingebouwde sluitknop.

HTML

<div id="liveAlertPlaceholder"></div>
<button type="button" class="btn btn-primary" id="liveAlertBtn">Toon live alert</button>

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

const alertPlaceholder = document.getElementById('liveAlertPlaceholder')

const alert = (message, type) => {
  const wrapper = document.createElement('div')
  wrapper.innerHTML = [
    `<div class="alert alert-${type} alert-dismissible" role="alert">`,
    `   <div>${message}</div>`,
    '   <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Sluiten"></button>',
    '</div>'
  ].join('')

  alertPlaceholder.append(wrapper)
}

const alertTrigger = document.getElementById('liveAlertBtn')
if (alertTrigger) {
  alertTrigger.addEventListener('click', () => {
    alert('Mooi, je hebt dit alert-bericht geactiveerd!', 'success')
  })
}

Linkkleur

Gebruik de utility-klasse .alert-link om binnen elke alert snel links in een bijpassende kleur te krijgen.

HTML

<div class="alert alert-primary" role="alert">
  Een eenvoudige primary-alert met <a href="#" class="alert-link">een voorbeeldlink</a>. Klik er gerust op.
</div>
<div class="alert alert-secondary" role="alert">
  Een eenvoudige secondary-alert met <a href="#" class="alert-link">een voorbeeldlink</a>. Klik er gerust op.
</div>
<div class="alert alert-success" role="alert">
  Een eenvoudige success-alert met <a href="#" class="alert-link">een voorbeeldlink</a>. Klik er gerust op.
</div>
<div class="alert alert-danger" role="alert">
  Een eenvoudige danger-alert met <a href="#" class="alert-link">een voorbeeldlink</a>. Klik er gerust op.
</div>
<div class="alert alert-warning" role="alert">
  Een eenvoudige warning-alert met <a href="#" class="alert-link">een voorbeeldlink</a>. Klik er gerust op.
</div>
<div class="alert alert-info" role="alert">
  Een eenvoudige info-alert met <a href="#" class="alert-link">een voorbeeldlink</a>. Klik er gerust op.
</div>
<div class="alert alert-light" role="alert">
  Een eenvoudige light-alert met <a href="#" class="alert-link">een voorbeeldlink</a>. Klik er gerust op.
</div>
<div class="alert alert-dark" role="alert">
  Een eenvoudige dark-alert met <a href="#" class="alert-link">een voorbeeldlink</a>. Klik er gerust op.
</div>

Aanvullende content

Alerts kunnen ook aanvullende HTML-elementen bevatten, zoals koppen, alinea's en scheidingslijnen.

HTML

<div class="alert alert-success" role="alert">
  <h4 class="alert-heading">Goed gedaan!</h4>
  <p>Mooi, je hebt dit belangrijke alert-bericht met succes gelezen. Deze voorbeeldtekst wordt wat langer, zodat je kunt zien hoe de tussenruimte binnen een alert bij dit soort content werkt.</p>
  <hr>
  <p class="mb-0">Gebruik waar nodig margin-utilities om alles netjes en overzichtelijk te houden.</p>
</div>

Iconen

Op vergelijkbare wijze kun je flexbox-utilities en Bootstrap Icons gebruiken om alerts met iconen te maken. Afhankelijk van je iconen en content wil je misschien meer utilities of eigen stijlen toevoegen.

HTML

<div class="alert alert-primary d-flex align-items-center" role="alert">
  <svg xmlns="http://www.w3.org/2000/svg" class="bi bi-exclamation-triangle-fill flex-shrink-0 me-2" viewBox="0 0 16 16" role="img" aria-label="Waarschuwing:">
    <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
  </svg>
  <div>
    Een voorbeeld-alert met een icoon
  </div>
</div>

Meer dan één icoon nodig voor je alerts? Overweeg dan meer Bootstrap Icons te gebruiken en zoals hieronder een lokale SVG-sprite te maken, zodat je dezelfde iconen eenvoudig herhaaldelijk kunt aanroepen.

HTML

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="check-circle-fill" viewBox="0 0 16 16">
    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
  </symbol>
  <symbol id="info-fill" viewBox="0 0 16 16">
    <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
  </symbol>
  <symbol id="exclamation-triangle-fill" viewBox="0 0 16 16">
    <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
  </symbol>
</svg>

<div class="alert alert-primary d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Info:"><use xlink:href="#info-fill"/></svg>
  <div>
    Een voorbeeld-alert met een icoon
  </div>
</div>
<div class="alert alert-success d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Gelukt:"><use xlink:href="#check-circle-fill"/></svg>
  <div>
    Een voorbeeld van een success-alert met een icoon
  </div>
</div>
<div class="alert alert-warning d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Waarschuwing:"><use xlink:href="#exclamation-triangle-fill"/></svg>
  <div>
    Een voorbeeld van een warning-alert met een icoon
  </div>
</div>
<div class="alert alert-danger d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Gevaar:"><use xlink:href="#exclamation-triangle-fill"/></svg>
  <div>
    Een voorbeeld van een danger-alert met een icoon
  </div>
</div>

Wegklikken

Met de alert-JavaScript-plugin kun je elke alert inline wegklikken. Zo doe je dat:

Zorg dat je de alert-plugin, of de gecompileerde Bootstrap-JavaScript, hebt geladen.
Voeg een sluitknop en de klasse .alert-dismissible toe, die extra padding rechts van de alert toevoegt en de sluitknop positioneert.
Voeg op de sluitknop het attribuut data-bs-dismiss="alert" toe, dat de JavaScript-functionaliteit activeert. Gebruik daarbij het <button>-element voor correct gedrag op alle apparaten.
Om alerts te animeren bij het wegklikken voeg je de klassen .fade en .show toe.

Je ziet dit in actie in een live demo:

HTML

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Allemachtig!</strong> Je zou een aantal van de velden hieronder even moeten nalopen.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Sluiten"></button>
</div>

Let op

Wanneer een alert wordt weggeklikt, wordt het element volledig uit de paginastructuur verwijderd. Als een toetsenbordgebruiker de alert met de sluitknop wegklikt, gaat de focus plotseling verloren en wordt die, afhankelijk van de browser, teruggezet naar het begin van de pagina/het document. Daarom raden we aan extra JavaScript op te nemen die naar de gebeurtenis closed.bs.alert luistert en programmatisch focus() op de meest geschikte plek op de pagina zet. Ben je van plan de focus naar een niet-interactief element te verplaatsen dat normaal geen focus krijgt, voeg dan tabindex="-1" aan dat element toe.

CSS

Variabelen

Nieuw in v5.2.0

Als onderdeel van Bootstraps groeiende aanpak met CSS-variabelen gebruiken alerts nu lokale CSS-variabelen op .alert, 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/_alert.scss in de Bootstrap-broncode.

Sass-variabelen

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

Sass-mixin

Wordt in combinatie met $theme-colors gebruikt om contextuele modifier-klassen voor onze alerts te maken.

Standaardwaarden: zie scss/mixins/_alert.scss in de Bootstrap-broncode.

Sass-loop

Loop die de modifier-klassen genereert met de mixin alert-variant().

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

JavaScript-gedrag

Initialiseren

Initialiseer elementen als alerts

const alertList = document.querySelectorAll('.alert')
const alerts = [...alertList].map(element => new bootstrap.Alert(element))

Let op

Als je een alert alleen wilt kunnen wegklikken, hoef je het component niet handmatig via de JS-API te initialiseren. Door data-bs-dismiss="alert" te gebruiken wordt het component automatisch geïnitialiseerd en netjes weggeklikt.

Zie het onderdeel triggers voor meer details.

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="alert" op een knop binnen het component om het te sluiten.

Let op: een alert sluiten verwijdert hem uit de DOM.

Methodes

Je kunt een alert-instantie maken met de alert-constructor, bijvoorbeeld:

const bsAlert = new bootstrap.Alert('#myAlert')

Hierdoor luistert een alert naar klikgebeurtenissen op onderliggende elementen met het attribuut data-bs-dismiss="alert". (Niet nodig bij gebruik van de automatische initialisatie van de data-api.)

Methode	Omschrijving
`close`	Sluit een alert door hem uit de DOM te verwijderen. Als de klassen `.fade` en `.show` op het element aanwezig zijn, vervaagt de alert voordat hij wordt verwijderd.
`dispose`	Vernietigt de alert van een element. (Verwijdert opgeslagen gegevens van het DOM-element)
`getInstance`	Statische methode waarmee je de alert-instantie kunt ophalen die bij een DOM-element hoort. Bijvoorbeeld: `bootstrap.Alert.getInstance(alert)`.
`getOrCreateInstance`	Statische methode die een alert-instantie teruggeeft die bij een DOM-element hoort, of een nieuwe aanmaakt als die nog niet was geïnitialiseerd. Je gebruikt hem zo: `bootstrap.Alert.getOrCreateInstance(element)`.

Basisgebruik:

const alert = bootstrap.Alert.getOrCreateInstance('#myAlert')
alert.close()

Gebeurtenissen

De alert-plugin van Bootstrap stelt een aantal gebeurtenissen beschikbaar om op de alert-functionaliteit in te haken.

Gebeurtenis	Omschrijving
`close.bs.alert`	Wordt direct afgevuurd wanneer de instantiemethode `close` wordt aangeroepen.
`closed.bs.alert`	Wordt afgevuurd wanneer de alert is gesloten en de CSS-transities zijn voltooid.

const myAlert = document.getElementById('myAlert')
myAlert.addEventListener('closed.bs.alert', event => {
  // doe iets, bijvoorbeeld de focus expliciet naar het meest geschikte element verplaatsen,
  // zodat die niet verloren gaat of naar het begin van de pagina wordt teruggezet
  // document.getElementById('...').focus()
})