Las alertas con Bootstrap 4

Las alertas son muy útiles para mostrar al usuario un mensaje informativo, un suceso correcto, un suceso incorrecto o erróneo y/o una alerta entre otros.

Las alertas proporcionan mensajes textuales, principalmente, para acciones típicas del usuario tales como la inserción, modificación o eliminación de un registro con un formato o diseño específico que lo representa.

Hay muchas formas y estilos para mostrar este tipo de alertas. Las principales características son el color de fondo y el color del texto que las identifican.

En este artículo vas a conocer como crear mensajes de alerta utilizando Bootstrap 4.

El caso es que Boostrap ya tiene unas clases CSS predefinidas para mostrar rápida y fácilmente alertas en tu archivo HTML.

Las alertas con Bootstrap están disponibles para cualquier longitud de texto. No hay límite. Además, también se permite agregar dentro contenido HTML.

Tienes disponible para agregar en tu archivo HTML 8 clases contextuales para las alertas:

Alerta primaria

Las alertas primarias se muestran con un fondo azul claro y con un color azul más oscuro para el texto.

Para utilizar este tipo de alerta, en tu archivo HTML debes agregar al contenedor del mensaje de alerta las clases «alert alert-primary».

Por ejemplo:

Source code

<div class="alert alert-primary" role="alert">
    Esta es una alerta primaria. Utiliza la clase <strong>alert alert-primary</strong>
</div>

Obteniendo como resultado:

Alerta secundaria

Las alertas secundarias se muestran con un fondo gris claro y con un color gris un poco más oscuro para el texto.

Para utilizar este tipo de alerta, en tu archivo HTML debes agregar al contenedor del mensaje de alerta las clases «alert alert-secondary».

Por ejemplo:

Source code

<div class="alert alert-secondary" role="alert">
    Esta es una alerta secundaria. Utiliza la clase <strong>alert alert-secondary</strong>
</div>

Obteniendo como resultado:

Alerta de éxito

Las alertas de éxito se muestran con un fondo verde claro y con un color verde un poco más oscuro para el texto.

Para utilizar este tipo de alerta, en tu archivo HTML debes agregar al contenedor del mensaje de alerta las clases «alert alert-success».

Por ejemplo:

Source code

<div class="alert alert-success" role="alert">
    Esta es una alerta de éxito. Utiliza la clase <strong>alert alert-success</strong>
</div>

Obteniendo como resultado:

Yo suelo utilizar mucho este tipo de alertas para informar al usuario de que su acción se ha ejecutado con éxito, por ejemplo.

Alerta de peligro

Las alertas de peligro se muestran con un fondo rojo claro y con un color rojo un poco más oscuro para el texto.

Para utilizar este tipo de alerta, en tu archivo HTML debes agregar al contenedor del mensaje de alerta las clases «alert alert-danger».

Por ejemplo:

Source code

<div class="alert alert-danger" role="alert">
    Esta es una alerta de peligro. Utiliza la clase <strong>alert alert-danger</strong>
</div>

Obteniendo como resultado:

Yo suelo utilizar mucho este tipo de alertas para informar al usuario de que su acción no se ha ejecutado correctamente. Hay algún error. Es ideal para mostrar errores al usuarios.

Alerta de advertencia

Las alertas de advertencia se muestran con un fondo amarillo claro y con un color amarillo un poco más oscuro para el texto.

Para utilizar este tipo de alerta, en tu archivo HTML debes agregar al contenedor del mensaje de alerta las clases «alert alert-danger».

Por ejemplo:

Source code

<div class="alert alert-warning" role="alert">
    Esta es una alerta de advertencia. Utiliza la clase <strong>alert alert-warning</strong>
</div>

Obteniendo como resultado:

En el ejemplo en funcionamiento puedes ver en directo estos tipos de alertas y algunos más.

Conclusiones

Dentro del contenedor de la alerta, en la mayoría de casos se agrega texto pero también puedes agregar etiquetas HTML de todo tipo.

Las alertas en Bootstrap tienen un aspecto específico por defecto que ya puede servir para la mayoría de los casos. No obstante, debes saber que esto puede ser personalizado. Tan solo tienes que sobrescribir la clase que desea cambiar. Si dominas el CSS no te resultará nada difícil.

Ver demo Descargar

Ver más información sobre las alertas en Bootstrap 4