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

Question

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" 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>

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!

Answer 1

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" class="d-flex justify-content-center align-items-center w-100">

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