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">×</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">