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:

<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 primaria en Bootstrap

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:

<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 secundaria en Bootstrap

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:

<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:

Alerta de éxito en Bootstrap

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:

<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:

Alerta de peligro en Bootstrap

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:

<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:

Alerta de advertencia en Bootstrap

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

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (2 votos, promedio: 5,00 de 5)
Cargando…
Comparte en las redes sociales

Una respuesta a “Las alertas con Bootstrap 4”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre