Bootstrap 4 Toast

El componente de toast (tostada) es como un cuadro de alerta que solo se muestra durante un par de segundos cuando sucede algo (es decir, cuando el usuario hace clic en un botón, envía un formulario, etc.).

Crear un Toast

Para crear un Toast, use la clase .toast y agrega un .toast-header y un .toast-body dentro de ella.

Ejm

<div class="toast">
  <div class="toast-header">
    Toast Header
  </div>
  <div class="toast-body">
    Some text inside the toast body
  </div>
</div>

Nota: Los Toasts deben inicializarse con jQuery: selecciona el elemento especificado y llama al método toast().

El siguiente código mostrará todas las “toas” en el documento.

<script>
$(document).ready(function(){
  $('.toast').toast('show');
});
</script>

Mostrar y ocultar Toast

Las Toasts están ocultas por defecto. Utiliza el atributo data-autohide = “false” para mostrarlo de forma predeterminada. Para cerrarlo, use un elemento <button> y agrega data-dismiss = “toast”.

Ejm

<div class="toast" data-autohide="false">
  <div class="toast-header">
    <strong class="mr-auto text-primary">Toast Header</strong>
    <small class="text-muted">5 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast">&times;</button>
  </div>
  <div class="toast-body">
    Some text inside the toast body
  </div>
</div>