Kursempfehlung:

Bootstrap 5 Warnung

Warnung

Bootstrap 5 bietet eine einfache Methode zum Erstellen vorgegebener Warnmeldungen:

  • Warnmeldungen werden mit der .alert-Klasse erstellt, gefolgt von einer der Kontextklassen:
  • .alert-success
  • .alert-info
  • .alert-warning
  • .alert-danger
  • .alert-primary
  • .alert-secondary
  • .alert-light

Beispiel

<div class="alert alert-success">
  <strong>Erfolgreich!</strong> Diese Warnmeldung deutet auf einen Erfolg oder eine positive Aktion hin.
</div>

Versuchen Sie es selbst

.alert-dark

Warnlinks .alert-link Fügen Sie die Klasse zu jedem Link im Warnmeldungsfeld hinzu, um ein "passendes farbiges Link" zu erstellen:

Beispiel

<div class="alert alert-success">
  <strong>Erfolgreich!</strong> Sie sollten diese Nachricht <a href="#" class="alert-link">lesen</a>.
</div>

Versuchen Sie es selbst

Warnmeldung schließen

Um eine Warnmeldung zu schließen, fügen Sie .alert-dismissible Fügen Sie die Klasse zu dem Warnmeldungskontainer hinzu. Fügen Sie dann class="btn-close" und data-bs-dismiss="alert" Fügen Sie es zu einem Link- oder Button-Element hinzu (wenn Sie darauf klicken, verschwindet die Warnmeldung).

Beispiel

<div class="alert alert-success alert-dismissible">
  <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
  <strong>Erfolgreich!</strong> Diese Warnmeldung deutet auf einen Erfolg oder eine positive Aktion hin.
</div>

Versuchen Sie es selbst

Warnmeldungsbewegung

.fade und .show Fügen Sie dem Warnmeldungsbereich eine Ein- und Ausblendeeffekt hinzu, wenn Sie die Warnmeldung schließen:

Beispiel

<div class="alert alert-danger alert-dismissible fade show">

Versuchen Sie es selbst