Spinner deforms in flex box when sibling content is multiline

[danneu]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

Take the spinner example in the docs:

<div class="d-flex align-items-center">
  <strong>Loading...</strong>
  <div class="spinner-border ms-auto"></div>
</div>

And turn "Loading..." into a string that's long enough to wrap into multiple lines. The spinner will deform from a circle into an ellipse.

<div class="d-flex align-items-center">
  <strong>A long string of text that will wrap to the next line...</strong>
  <div class="spinner-border ms-auto" aria-hidden="true"></div>
</div>

Screenshot:

Reduced test cases

https://codepen.io/danneu/pen/qEdwVvZ

What operating system(s) are you seeing the problem on?

macOS

What browser(s) are you seeing the problem on?

Chrome, Safari, Firefox

What version of Bootstrap are you using?

v5.3.7

[julien-deramond]

Thanks for flagging this use case, @danneu

I haven’t dug too deeply into it yet, but a possible solution might look like this: https://stackblitz.com/edit/akm2vkwv?file=index.html

<div class="d-flex align-items-center justify-content-between">
  <strong class="me-2 flex-grow-1">
    A long string of text that will wrap to the next line...
  </strong>
  <div class="spinner-border flex-shrink-0" aria-hidden="true"></div>
</div>

If it works well, we could consider updating the documentation to use this version instead.

[danneu]

Another fix is to wrap the spinner in a div:

<div class="example d-flex align-items-center justify-content-between">
  <strong>This multi line example will deform the spinner into something that isn't a nice round circle...</strong>
-  <div class="spinner-border"></div>
+  <div><div class="spinner-border"></div></div>
</div>

So maybe the docs could be changed to simply demonstrate that instead of making the spinner a direct child of the flex box.