CODEWITHSUNDEEP
cssbootstrap-4bootstrap-toast
FrontRangeGuy
FrontRangeGuy

Reputation: 131

Can't get Bootstrap toasts to horizontally center

I am using Bootstrap 4.6.1 (since bootstrap-select won't work with anything newer) and trying to get some toasts in a page to center horizontally using the following code :

         <div class="d-flex flex-row justify-content-center col-sm-12">
            <div class="toast text-white bg-success border-0" role="alert" id="msgUpdOK" data-delay="5000" data-autohide="true">
                <div class="toast-header">
                    <strong class="mr-auto">System Message</strong>
                    <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">
                    Update completed successfully.
                </div>
            </div>
            <div class="toast text-white bg-danger border-0" role="alert" id="msgUpdFail" data-delay="5000" data-autohide="true">
                <div class="toast-header">
                    <strong class="mr-auto">System Message</strong>
                    <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">
                    Update failed, error message logged.
                </div>
            </div>
        </div>

The weird thing is, the toasts don't display centered to the rest of the page, but they aren't left-justified either, as seen here:

Screenshot of output

Thinking that maybe it was another HTML/CSS element in the page that was causing the problem, I created a totally blank page except for the code snippet shared above, and it does the exact same thing. I have tried all of the ways I could find to make this work, but I am obviously missing something, so I would greatly appreciate some guidance. Thanks!

Upvotes: 0

Views: 672

Answers (1)

FrontRangeGuy
FrontRangeGuy

Reputation: 131

Found an answer that works, by adding this CSS:

.toast {
    left: 50%;
    position: fixed;
    transform: translate(-50%, 0px);
    z-index: 9999;
}

Upvotes: 2

Related Questions