How do I use spinners inline with text and align them with text-baseline?

Asked on Sep 05, 2025

1 Answer

To use spinners inline with text and align them with the text-baseline in Bootstrap 5, you can utilize the `spinner-border` or `spinner-grow` classes along with the `align-text-bottom` utility class.

<!-- BEGIN COPY / PASTE -->
        <p>Loading<span class="spinner-border spinner-border-sm align-text-bottom" role="status" aria-hidden="true"></span> please wait...</p>
        <!-- END COPY / PASTE -->

Additional Comment:

The `spinner-border-sm` class makes the spinner smaller, suitable for inline usage.
The `align-text-bottom` class aligns the spinner to the text-baseline.
The `role="status"` and `aria-hidden="true"` attributes are used for accessibility purposes.

✅ Answered with Bootstrap 5 best practices.

← Back to All Questions