I have integrated a Bootstrap toast element within an ASP.NET web form as shown below:
<asp:Content ID="ctMain" ContentPlaceHolderID="cpMain" runat="server">
<div aria-live="polite" aria-atomic="true" class="mt-4 d-flex">
<div class="toast text-white bg-danger border-0" role="alert" aria-live="assertive" aria-atomic="true" id="toastFail" data-bs-delay="2000" data-bs-autohide="true">
<div class="toast-header"><strong class="mr-auto">Toast Title</strong></div>
<div class="toast-body"><span id="spnErr" /></div>
</div>
</div>
<section class="vh-50">
<!-- rest of page content -->
</section
</asp:Content>
When calling the toast in my JavaScript code, I use the following method:
$('#toastFail').toast('show');
The toast is displayed, but I am looking to center it vertically on the page. I have searched the Bootstrap documentation but couldn't find a solution. Can anyone provide assistance on achieving this? Thank you!