How to fix common Bootstrap CSS issues like spinner distortion in flex containers?

Bootstrap spinners distort in flex containers due to flex item shrinking—fix with align-self-start, explicit sizing, or update to BS 5.3.8+, which handles multiline flex better automatically.​

Flex containers squeeze inline-flex spinners (built with rems and currentColor) when space gets tight, especially with wrapping text—add align-self-start to stop shrinking, or set width/height directly. Quick debug: inspect in dev tools for flex-basis overrides, test without flex parent, and grab Bootstrap 5.3.8+ for built-in fixes on multiline scenarios. Margin utilities like ms-auto or m-3 also space them perfectly without distortion.

Code

<!-- Fixed spinner in flex (no distortion) -->
<div class="d-flex align-items-start">
  <span>Loading data...</span>
  <div class="spinner-border ms-2 flex-shrink-0"></div>
</div>


<!-- Or sized explicitly -->
<div class="spinner-border" style="width: 2rem; height: 2rem;" role="status"></div>