How to vertically center Bootstrap 5 toast in an ASP.NET Web Form?-CodePudding

I am using a Bootstrap toast element in an ASP.NET web form as follows:

<asp:Content ID="ctMain" ContentPlaceHolderID="cpMain" runat="server">
    <div aria-live="polite" aria-atomic="true" >
        <div  role="alert" aria-live="assertive" aria-atomic="true" id="toastFail" data-bs-delay="2000" data-bs-autohide="true">
            <div ><strong >Toast Title</strong></div>
            <div ><span id="spnErr" /></div>
        </div> 
    </div>
    <section >
        <!-- rest of page content -->
    </section
</asp:Content>

Within my Javascript bit, I call the toast as so: $('#toastFail').toast('show');

The toast shows up, but what I would like to do is have the toast center vertically in the page, but I can't find anything in the Bootstrap docs on how to do this. Can anyone give me some help on it? Thanks!

CodePudding user response：

According to the Bootstrap documentation:

You can also get fancy with flexbox utilities to align toasts horizontally and/or vertically.

Modify div class to:

<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" >

Before using this class make sure that your toast has enough space around it.