Currently utilizing Bootstrap 4.6.1 (due to compatibility issues with bootstrap-select and newer versions) and endeavoring to center some toasts horizontally within a page using the code below:
<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">×</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">×</span>
</button>
</div>
<div class="toast-body">
Update failed, error message logged.
</div>
</div>
</div>
Interestingly, the toasts do not appear uniformly centered on the page, yet they are not aligned to the left either, as depicted in the screenshot https://i.sstatic.net/H1dwS.png.
Considering the possibility of another HTML/CSS element on the page causing the issue, I have constructed a completely empty page aside from the aforementioned code snippet, but the behavior persists. Despite attempting various methods to rectify this, I seem to be overlooking a crucial element, hence I would greatly appreciate any guidance on this matter. Thank you!