Bootstrap 4 Schnellstart – Alerts

Alerts

Alerts sind Texthervorhebungen, die eine Textmeldung anzeigen. Diese Textmeldung erhält man mit der Klasse alert. Auch hier gibt es verschiedene Farben. Wir starten mit der Primärfarbe über die Klasse alert-primary:

<div class="alert alert-primary" role="alert">
  Hallo! Beachte mich!
</div>

Hinweis: Informationen zu Farben findest du im nächsten Modul

Passend zum alert, kann man in der Meldung einen klickbaren Link anlegen, der farblich passend zur Meldung angezeigt wird. Dies wird über die Klasse alert-link erreicht.

<div class="alert alert-primary" role="alert">
  Hallo! Beachte mich! Oder <a href=https://lerneProgrammieren.de class="alert-link"> klicke auf diesen Link.</a>
</div>

 

Eine Meldung sollte man auch wegklicken können. Dies kannst du durch die Klasse alert-dismissible erreichen, achte darauf der Meldung eine role="alert" mitzugeben.

Außerdem benötigst du einen Button der ein data-dismiss="alert" Attribut hat.

Mit den Klassen fade und show wird das Schließen animiert, das ist aber optional.

So sieht der gesamte Code aus:

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  Oh nein! Das solltest du dir nochmal genauer anschauen.
  <button class="close" data-dismiss="alert">
    <span>×</span>
  </button>
</div>

Am besten schaust du dir den Code in Aktion an: