I've been working with toasts in Bootstrap 4 and one thing has been bothering me:
When I initialize the toast like this:
<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>
as per the documentation
$(document).ready(function () {
$(".toast").toast("show");
});
the toast shows as expected when the page loads. However, if I don't initialize the toast, the HTML code takes up space at the bottom of my page.
Is there a way to prevent the toast from showing when the page loads and without the HTML code taking up space? I've tried initializing them with toast("hide") or toast("dispose") as well.
Thank you