Bootstrap4 初始化 Toast

Question

I am working with toasts in Bootstrap 4 and there is one things that's bothering me:

If I initialize the toast

<div class="toast my-3" data-delay="2500">
    <div class="toast-header text-dark">
        //fill this later
    </div>
    <div class="toast-body text-dark">
        //fill this later
    </div>
</div>

like in the documentation

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

the toast is show as expected, when the page loads. If I don't initialize the toast, the html code takes some place. at the bottom of my page.

How can I make the toast not to be shown when loading the page and not taking some place due to html code? I tried initialize them with toast("hide") or toast("dispose") as well.

Thanks

Answer 1

When you write this:

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

It means you're expecting the toast to show as soon as the DOM is loaded. If you want the toast to appear conditionnally, you have for example to create a button in your html file (click on "Run snippet" and click on the button).

 $(document).ready(function () { $('#toastThis').on( "click", function() { $(".toast").toast("show"); }); });

 .toast { position: absolute; top: 0; right: 0; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/> <button type="button" id="toastThis" class="btn btn-primary">Primary</button> <div class="toast" role="alert" aria-live="assertive" aria-atomic="true"> <div class="toast-header"> <img src="..." class="rounded mr-2" alt="..."> <strong class="mr-auto">Bootstrap</strong> <small>11 mins ago</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"> Hello, world. This is a toast message. </div> </div>