Toast

Ejemplo básico


<div class="toast " role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false">
<div class="toast-header">
<span class="icon-add-user mr-2"></span>
<strong class="mr-auto">New user added</strong>
<small class="ml-2">11 mins ago</small>
<button type="button" class="btn btn-primary btn-icon btn-sm ml-2 close" data-dismiss="toast" aria-label="Close"><span class="icon-close"></span></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>

Toast apilados


<div class="toast " role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false">
<div class="toast-header">
<span class="icon-add-user mr-2"></span>
<strong class="mr-auto">New user added</strong>
<small class="ml-2">11 mins ago</small>
<button type="button" class="btn btn-primary btn-icon btn-sm ml-2 close" data-dismiss="toast" aria-label="Close"><span class="icon-close"></span></button>
</div>

<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>

<div class="toast " role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false">
<div class="toast-header">
<span class="icon-add-user mr-2"></span>
<strong class="mr-auto">New user added</strong>
<small class="ml-2">11 mins ago</small>
<button type="button" class="btn btn-primary btn-icon btn-sm ml-2 close" data-dismiss="toast" aria-label="Close"><span class="icon-close"></span></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>

Colocación

Coloque los Toast con CSS personalizado según lo necesite. La parte superior derecha a menudo se usa para notificaciones, al igual que la parte superior central. Si solo va a mostrar un Toast a la vez, coloque los estilos de posicionamiento directamente en el Toast.


<div class="toast " role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false">
<div class="toast-header">
<span class="icon-add-user mr-2"></span>
<strong class="mr-auto">New user added</strong>
<small class="ml-2">11 mins ago</small>
<button type="button" class="btn btn-primary btn-icon btn-sm ml-2 close" data-dismiss="toast" aria-label="Close"><span class="icon-close"></span></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>

<div class="toast " role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false">
<div class="toast-header">
<span class="icon-add-user mr-2"></span>
<strong class="mr-auto">New user added</strong>
<small class="ml-2">11 mins ago</small>
<button type="button" class="btn btn-primary btn-icon btn-sm ml-2 close" data-dismiss="toast" aria-label="Close"><span class="icon-close"></span></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>

¿Como usar?

Habilitar toast vía JavaScript

$('.toast').toast(option);
Más info