title: Can't get Bootstrap toasts to horizontally center
body: <p>I am using Bootstrap 4.6.1 (since <code>bootstrap-select</code> won't work with anything newer) and trying to get some toasts in a page to center horizontally using the following code :</p>
  <pre><code>         &lt;div class=&quot;d-flex flex-row justify-content-center col-sm-12&quot;&gt;
              &lt;div class=&quot;toast text-white bg-success border-0&quot; role=&quot;alert&quot; id=&quot;msgUpdOK&quot; data-delay=&quot;5000&quot; data-autohide=&quot;true&quot;&gt;
                  &lt;div class=&quot;toast-header&quot;&gt;
                      &lt;strong class=&quot;mr-auto&quot;&gt;System Message&lt;/strong&gt;
                      &lt;button type=&quot;button&quot; class=&quot;ml-2 mb-1 close&quot; data-dismiss=&quot;toast&quot; aria-label=&quot;Close&quot;&gt;
                          &lt;span aria-hidden=&quot;true&quot;&gt;&amp;times;&lt;/span&gt;
                      &lt;/button&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;toast-body&quot;&gt;
                      Update completed successfully.
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class=&quot;toast text-white bg-danger border-0&quot; role=&quot;alert&quot; id=&quot;msgUpdFail&quot; data-delay=&quot;5000&quot; data-autohide=&quot;true&quot;&gt;
                  &lt;div class=&quot;toast-header&quot;&gt;
                      &lt;strong class=&quot;mr-auto&quot;&gt;System Message&lt;/strong&gt;
                      &lt;button type=&quot;button&quot; class=&quot;ml-2 mb-1 close&quot; data-dismiss=&quot;toast&quot; aria-label=&quot;Close&quot;&gt;
                          &lt;span aria-hidden=&quot;true&quot;&gt;&amp;times;&lt;/span&gt;
                      &lt;/button&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;toast-body&quot;&gt;
                      Update failed, error message logged.
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  <p>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:</p>
  <p><a href="https://i.stack.imgur.com/H1dwS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/H1dwS.png" alt="Screenshot of output" /></a></p>
  <p>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!</p>