Alerts en bootstrap 4

Los alerts en bootstrap 4 no son lo que entendemos en javascript, consisten en remarcar una parte del contenido dentro del contexto de la web.

De este modo podemos usar la clase alert para hacer que el contenido se marque con un padding, pero no tendría mayor efecto. No obstante podemos usar alert y añadir también una de las clases con los códigos de color:

  • alert-success
  • alert-info
  • alert-warning
  • alert-danger
  • alert-primary
  • alert-secondary
  • alert-light
  • alert-dark
<div class="alert alert-success ">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
</div>

Lo cual va a dar un resultado similar a este:

Si queremos poner un link dentro de alerte podemos añadir a la etiqueta <a> la clase alert-link

<a href="#" class="alert-link">esto es un link</a>

Lo cual hace que el link no sea el típico, si no que le da una tonalidad dependiendo el color del alert y en negrita tal y como vemos aquí:

Pero aun tenemos más opciones con los alerts. Si observamos este código:

<div class="alert alert-success alert-dismissable">
	<button type="button" class="close" data-dismiss="alert">&times;</button>
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <a href="#" class="alert-link">esto es un link</a>
</div>

Vemos varias cosas importantes:

  • Se ha utilizado la clase alert-dismissable, la cual hace que el alert se pueda cerrar, pero por si misma no hace nada, necesita un boton.
  • En el botón le añadimos la clase close y en el atributo data-dismiss el elemento que queremos eliminar, en nuestro caso el alert.
  • introducimos &times; que es la X de cerrado, y automaticamente se alinea a la derecha.

En este caso tenemos el siguiente resultado:

Así de sencillo se pueden usar los alerts en boostrap 4.