Bootstrap 5 Toast

Toast (pão de queijo)

O componente Toast é semelhante a uma caixa de aviso, que aparecerá por alguns segundos quando algo acontecer (por exemplo, quando o usuário clicar em um botão, submeter um formulário, etc.).

Como criar Toast

Para criar Toast, use .toast classe, e adicione .toast-header e .toast-body.

Atenção:Por padrão, o toast está oculto. Para mostrá-lo, use .show classe. Para fechá-lo, use o elemento <button> e adicione data-bs-dismiss="toast":

<div class="toast show">
  <div class="toast-header">
    Título do Toast
    <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
  </div>
  <div class="toast-body">
    Texto no corpo do toast.
  </div>
</div>

Experimente pessoalmente

Abrir Toast

Para exibir Toast clicando no botão, você deve inicializá-lo com JavaScript: selecione o elemento especificado e chame toast() Métodos.

Quando você clicar no botão, o seguinte código exibirá todos os toast no documento:

Exemplo

<script>
document.getElementById("toastbtn").onclick = function() {
  var toastElList = [].slice.call(document.querySelectorAll('.toast'))
  var toastList = toastElList.map(function(toastEl) {
    return new bootstrap.Toast(toastEl)
  )
  toastList.forEach(toast => toast.show())
}
</script>

Experimente pessoalmente