Bootstrap 4 - Estilos para Alerts I

Bootstrap 4 - Estilos para Alerts I

Los alerts de Bootstrap se puede utilizar en multitud de casos, por ejemplo para cuando una usuario se ha registrado con éxito en un sitio web, cuando hace login y ha escrito una contraseña incorrecta, cuando se quiere avisar a un visitante de algo importante, escribir una nota...

Estilos Alert Bootstrap 4

En el siguiente código, lo importante es el nombre de la clase para hacer referencia a los estilos CSS que contiene Bootstrap.

<div class="alert alert-primary">
  Alert primario en Bootstrap 4.
</div>
<div class="alert alert-secondary">
  Alert secundario en Bootstrap 4.
</div>
<div class="alert alert-success">
  Alert de éxito en Bootstrap 4.
</div>
<div class="alert alert-danger">
  Alert de peligro en Bootstrap 4.
</div>
<div class="alert alert-warning">
  Alert de advertencia en Bootstrap 4.
</div>
<div class="alert alert-info">
  Alert para info en Bootstrap 4.
</div>
<div class="alert alert-light">
  Alert claro en Bootstrap 4.
</div>
<div class="alert alert-dark">
  Alert oscuro en Bootstrap 4.
</div>

Resultado

Alert de contenido adicional 

Con los mismos alerts se pueden hacer cosas más elaboradas como este aviso adicional. En primer lugar, la clase alert-heading se puede utilizar con cualquiera de las etiquetas <h></h>, de <h1> a <h6>.
Podemos poner cuantos párrafos queramos.
<hr> crea la línea divisoria.
Por último, la clase mb (margin bottom) determina la cantidad de margen inferior.

<div class="alert alert-primary">
  <h1 class="alert-heading">¡Primary! Este es el título</h1>
  <p>Este es un aviso primary.
  Puedes poner tantas líneas necesites. Aquí va el cuerpo del alert.</p>
  <hr>
  <p class="mb-0">Este es el margin bottom (margen inferior) deja mb-0 para 0 de margen o pon cualquier número dependiendo del margen que quieras.</p>
</div>
 
<div class="alert alert-secondary">
  <h1 class="alert-heading">¡Secondary! Este es el título</h1>
  <p>Este es un aviso secondary.
  Puedes poner tantas líneas necesites. Aquí va el cuerpo del alert.</p>
  <hr>
  <p class="mb-0">Este es el margin bottom (margen inferior) deja mb-0 para 0 de margen o pon cualquier número dependiendo del margen que quieras.</p>
</div>
 
<div class="alert alert-success">
  <h1 class="alert-heading">¡Success! Este es el título</h1>
  <p>Este es un aviso success.
  Puedes poner tantas líneas necesites. Aquí va el cuerpo del alert.</p>
  <hr>
  <p class="mb-0">Este es el margin bottom (margen inferior) deja mb-0 para 0 de margen o pon cualquier número dependiendo del margen que quieras.</p>
</div>
 
<div class="alert alert-danger">
  <h1 class="alert-heading">¡Danger! Este es el título</h1>
  <p>Este es un aviso danger. Está en color rojo para que llame tu atención.
  Puedes poner tantas líneas necesites. Aquí va el cuerpo del alert.</p>
  <hr>
  <p class="mb-0">Este es el margin bottom (margen inferior) deja mb-0 para 0 de margen o pon cualquier número dependiendo del margen que quieras.</p>
</div>
 
<div class="alert alert-warning">
  <h1 class="alert-heading">¡Warning! Este es el título</h1>
  <p>Este es un aviso warning.
  Puedes poner tantas líneas necesites. Aquí va el cuerpo del alert.</p>
  <hr>
  <p class="mb-0">Este es el margin bottom (margen inferior) deja mb-0 para 0 de margen o pon cualquier número dependiendo del margen que quieras.</p>
</div> 

<div class="alert alert-info">
  <h1 class="alert-heading">¡Info! Este es el título</h1>
  <p>Este es un aviso info.
  Puedes poner tantas líneas necesites. Aquí va el cuerpo del alert.</p>
  <hr>
  <p class="mb-0">Este es el margin bottom (margen inferior) deja mb-0 para 0 de margen o pon cualquier número dependiendo del margen que quieras.</p>
</div>
 
<div class="alert alert-light">
  <h1 class="alert-heading">¡Light! Este es el título</h1>
  <p>Este es un aviso light.
  Puedes poner tantas líneas necesites. Aquí va el cuerpo del alert.</p>
  <hr>
  <p class="mb-0">Este es el margin bottom (margen inferior) deja mb-0 para 0 de margen o pon cualquier número dependiendo del margen que quieras.</p>
</div>

<div class="alert alert-dark">
  <h1 class="alert-heading">¡Dark! Este es el título</h1>
  <p>Este es un aviso dark.
  Puedes poner tantas líneas necesites. Aquí va el cuerpo del alert.</p>
  <hr>
  <p class="mb-0">Este es el margin bottom (margen inferior) deja mb-0 para 0 de margen o pon cualquier número dependiendo del margen que quieras.</p>
</div>

Resultado

Pronto escribiré más sobre Bootstrap 4, todavía nos quedan por ver más clases alert.