Bootstrap 5 Spinners Flex Placements

Last Updated : 23 Jul, 2025

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.

HTML 
<!doctype html>
<html lang="en">

<head>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
          rel="stylesheet"
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous">
</head>

<body>
    <h1 class="mt-3 text-success text-center">
        GeeksforGeeks
    </h1>
    <h4 class="text-center">
        Bootstrap 5 Spinners Flex Placements
    </h4>
    <div class="d-flex align-items-center container mt-3">
        <strong>
            Loading Your Content...
        </strong>
        <div class="spinner-border ms-auto"></div>
    </div>
    <div class="d-flex align-items-center container mt-3">
        <strong>
            Spinner in Danger Color...
        </strong>
        <div class="spinner-border ms-auto text-danger"></div>
    </div>
</body>

</html>

Output:

 

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.

HTML 
<!doctype html>
<html lang="en">

<head>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
          rel="stylesheet" 
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous">
</head>

<body>
    <h1 class="mt-3 text-success text-center">
        GeeksforGeeks
    </h1>
    <h4 class="text-center">
        Bootstrap 5 Spinners Flex Placements
    </h4>
    <div class="d-flex container p-4 bg-light">
        <div class="text-center">
            <div class="spinner-border">
                <span class="visually-hidden">
                    Loading...
                </span>
            </div>
        </div>
        <strong>
            This is the Spinner with Text-center and d-flex added
        </strong>
    </div>
    <div class="container p-4 text-light bg-dark mt-3">
        <div class="text-center">
            <div class="spinner-border text-success">
                <span class="visually-hidden">
                    Loading...
                </span>
            </div>
        </div>
        <strong>
            Spinner with Text-center with the color without d-flex
        </strong>
    </div>
</body>

</html>

Output:

 

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

Comment

Explore