Mostrar notificaciones Toast nativas de Bootstrap 4

Las notificaciones tipo toast sirven para mostrar pequeñas notificaciones al usuario, similares a las notificaciones que muestra facebook, estas pueden ser en la derecha superior o izquierda inferior de la pagina.

Para crear una notificación toast debemos descargar bootstrap, incluir el archivo bootstrap.min.css y bootstrap.min.js, ademas de jquery.min.js

<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>

El codigo básico para crear un toast es el siguiente:

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <strong class="mr-auto">Titulo de la notificacion</strong>
    <small class="text-muted">just now</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Contenido de la notificacion.
  </div>
</div>

Un toast cuenta de un header o cabecera y un body o cuerpo, y se muestra de la siguiente forma.

Se crea el toast pero para activarlo tenemos que agregar un script.

  $(document).ready(function(){
    $(".toast").toast("show");
  });

Por default, la notificación tarda un par de segundos y después de oculta automáticamente, para cambiar esto debemos agregar la opcion: autohide: false, de la siguiente manera.

  $(document).ready(function(){
    $(".toast").toast({autohide: false});
    $(".toast").toast("show");
  });

Otras de las opciones son:

• autohide: puede ser true o false
• animation: muestra una animación, puede ser true o false
• delay: El tiempo en milisegundos que tarda la notificación en ocultarse, para que funcione el autohide debe ser true

Para saber mas sobre las notificaciones toast debes ir a la documentación oficial de bootstrap 4.

Si requieres algún ejemplo por favor solicitarlo desde el formulario de contacto del sitio.