Bootstrap 4, Alertas

Bootstrap 4 proporciona una manera fácil de crear mensajes de alerta predefinidos.

Las alertas son creadas con la clase .alert seguido de las siguientes clases contextuales a elegir:

• .alert-success
• .alert-info
• .alert-warning
• .alert-danger
• .alert-primary
• .alert-secondary
• .alert-light
• .alert-dark

Ejm

<div class="alert alert-success">
  <strong>Success!</strong> Indicates a successful or positive action.
</div>

Links de alerta

Agrega la clase de enlace de alerta a cualquier enlace dentro del cuadro de alerta para crear «enlaces de colores coincidentes».

Ejm

<div class="alert alert-success">
  <strong>Success!</strong> You should
  <a href="#" class="alert-link">read this message</a>.
</div>

Alertas de cierre

Para cerrar el mensaje de alerta, agrega una clase .alert-dismissible al contenedor de alertas. Luego agrega class = «close» y data-dismiss = «alert» a un enlace o elemento de botón (cuando hace clic en este, el cuadro de alerta desaparecerá).

Ejm

<div class="alert alert-success alert-dismissible">
  <button type="button" class="close" data-dismiss="alert">&times;</button>
  <strong>Success!</strong> Indicates a successful or positive action.
</div>

Consejo: × (×) es una entidad HTML que es el icono preferido para los botones de cierre, en lugar de la letra «x».

Alertas anidadas

Las clases .fade y .show agregan un efecto de desvanecimiento al cerrar el mensaje de alerta.

Ejm

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