El documento explica cómo crear y mostrar "tostadas" en Bootstrap. Indica que las tostadas son cuadros de alerta que se muestran brevemente para notificar al usuario sobre alguna acción. Explica que para crear una tostada se debe usar la clase .toast y agregar .toast-header y .toast-body dentro de ella, y que deben inicializarse con jQuery. También indica cómo mostrar y ocultar las tostadas de manera predeterminada usando atributos como data-autohide y cómo cerrarlas con un botón y el atributo

1. GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”
Tostadas en BOOTSTRAP
El componente de pan tostado es como un cuadro de alerta que sólo se muestra durante un par
de segundos cuando pasa algo (es decir, cuando el usuario hace clic en un botón, envía un
formulario, etc.).
Cómo crear una Tostada
Para crear una tostada, utilice la clase .toast, y añada .toast-header y .toast-body dentro de ella:
Nota: Las Tostadas deben inicializar con jQuery: seleccionar el elemento especificado y llamar el
método toast() .
Código 185.html
<div class="toast">
<div class="toast-header">
Encabezado de la Tostada
</div>
<div class="toast-body">
Algún texto en el cuerpo de la tostada
</div>
</div>
<script>
$(document).ready(function(){
$('.toast').toast('show');
});
</script>

2. GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”
Mostrar y Ocultar Tostadas
Las Tostadas están ocultas por defecto. Utilice el atributo data-autohide="false" para mostrar por
defecto. Para cerrarla, utilizar un <button> y añada data-dismiss="toast":
Código 186.html
Fíjese que las clases mr-auto, ml-2 y mb-1 se utilizan para agregar márgenes específicos.
<div class="toast" data-autohide="false">
<div class="toast-header">
<strong class="mr-auto text-primary">Encabezado de Tostada</strong>
<small class="text-muted">Alguna info</small>
<button type="button" class="ml-2 mb-1 close" data-
dismiss="toast">&times;</button>
</div>
<div class="toast-body">
Algún texto en el cuerpo de la tostada
</div>
</div>