Bootstrap 5 Spinners Placement

Bootstrap 5 Spinners Placement is used to set the position of spinners where you want to place them according to the need. It uses three utilities flexbox utilities, float utilities, or text alignment to place the items.

Placement Utilities:

• Flex: It is used to set the position of spinners using flexbox placement classes.
• Float: It is used to set the position of spinners using the float placement classes.
• Text Align: It is used to set the position of spinner items using text-align placement classes.

Syntax:

•  Set spinner position using flexbox

<div class="d-flex">
 <div class="spinner-border" role="status">
 </div>
 ...
</div>

•  Set spinner position using float:

<div class="clearfix">
 <div class="spinner-border float-*" role="status">
 </div>
 ...
</div>

• Set spinner position using text-align: 

<div class="text-*">
 <div class="spinner-border" role="status">
 </div>
 ...
</div>

 

Example 1: In this example, we will use flexbox placement classes to place the spinner elements.

Output:

👁 Image

Example 2: In this example, we will use float placement classes to place the spinner elements.

Output:

👁 Image

Example 3: In this example, we will use text-align placement classes to place the spinner elements.

Output:

👁 Image

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