Bootstrap 5 Spinners Flex Placements

Bootstrap5 Spinner Flex Placements is a display utility that is used to place the spinner in a flexbox, where the spinner is placed inside the flexbox container using the .d-flex class.

Spinners Flex Placements Class:

• d-flex: This is a flexbox helper class and it is used to have the Flex Placement.

Syntax:

<div class="d-flex">
 <div class="spinner-border">
 <span class="visually-hidden">
 ...
 </span>
 </div>
</div>

 

Example 1: This example demonstrates how to implement the Flex Placement and also the spinner with a color.

Output:

👁 Image

Example 2: The code example demonstrates how to implement the text-center Placement with d-flex inside the d-flex container the text-center class doesn't work and without it works fine with different backgrounds.

Output:

👁 Image

Reference: https://getbootstrap.com/docs/5.0/components/spinners/#flex