Recomendaciones de cursos:

Alerta Bootstrap 5

Alerta

Bootstrap 5 proporciona un método simple para crear mensajes de alerta predefinidos:

  • Los cuadros de alerta se crean utilizando la clase .alert, seguida de una clase contextual alguna:
  • .alert-success
  • .alert-info
  • .alert-warning
  • .alert-danger
  • .alert-primary
  • .alert-secondary
  • .alert-light

Ejemplo

<div class="alert alert-success">
  <strong>¡Éxito!</strong> Este cuadro de alerta indica una acción exitosa o positiva.
</div>

Prueba personalmente

.alert-dark

Enlace de alerta .alert-link Añadir clase a cualquier enlace dentro del cuadro de alerta para crear un "enlace de color correspondiente":

Ejemplo

<div class="alert alert-success">
  <strong>¡Éxito!</strong> Debe <a href="#" class="alert-link">leer este mensaje</a>.
</div>

Prueba personalmente

Cerrar alerta

Para cerrar el mensaje de alerta, .alert-dismissible Añadir clase a la contenedor de alerta. Luego, class="btn-close" y data-bs-dismiss="alert" Añadir a elementos de enlace o botón (cuando haga clic en él, el cuadro de alerta desaparecerá).

Ejemplo

<div class="alert alert-success alert-dismissible">
  <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
  <strong>¡Éxito!</strong> Este cuadro de alerta indica una acción exitosa o positiva.
</div>

Prueba personalmente

Animación de cuadro de alerta

.fade y .show Añadir efecto de entrada y salida gradual al cerrar el mensaje de alerta:

Ejemplo

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

Prueba personalmente