Bootstrap 5 Spinners Placement

Last Updated : 21 Nov, 2022

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.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Bootstrap 5 Spinners Placement</title> 
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
        rel="stylesheet" integrity= 
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous"> 
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
            integrity= 
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
        crossorigin="anonymous"> 
    </script> 
</head> 
  
<body> 
    <div class="container text-center"> 
        <h1 class="text-success"> 
            GeeksforGeeks 
        </h1> 
  
        <h2>Bootstrap 5 Spinners Placement</h2> 
  
        <div class="d-flex justify-content-center"> 
            <div class="spinner-border  
                    spinner-border-sm"  
                role="status"> 
                <span class="visually-hidden"> 
                    Loading... 
                </span> 
            </div> 
            <div class="spinner-grow  
                    spinner-grow-sm" role="status"> 
                <span class="visually-hidden"> 
                    Loading... 
                </span> 
            </div> 
        </div> 
  
        <div class="d-flex justify-content-start"> 
            <div class="spinner-border  
                spinner-border-md" role="status"> 
                <span class="visually-hidden"> 
                    Loading... 
                </span> 
            </div> 
            <div class="spinner-grow  
                    spinner-grow-md" role="status"> 
                <span class="visually-hidden"> 
                    Loading... 
                </span> 
            </div> 
        </div> 
  
        <div class="d-flex justify-content-end"> 
            <div class="spinner-border" 
                style="width:2rem; height:2rem;" 
                role="status"> 
                <span class="visually-hidden"> 
                    Loading... 
                </span> 
            </div> 
            <div class="spinner-grow" 
                style="width:2rem; height:2rem;" 
                role="status"> 
                <span class="visually-hidden"> 
                    Loading... 
                </span> 
            </div> 
        </div> 
    </div> 
</body> 
</html>

Output:

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

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Bootstrap 5 Spinners Placement</title> 
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
        rel="stylesheet" integrity= 
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous"> 
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity= 
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
        crossorigin="anonymous"> 
    </script> 
</head> 
  
<body> 
    <div class="container text-center"> 
        <h1 class="text-success"> 
            GeeksforGeeks 
        </h1> 
  
        <h2>Bootstrap 5 Spinners Placement</h2> 
  
        <div class="clearfix float-start  
            text-success"> 
            <div class="spinner-border  
                 spinner-border-sm" role="status"> 
                <span class="visually-hidden"> 
                    Loading...</span> 
            </div> 
            <div class="spinner-grow  
                spinner-grow-sm" role="status"> 
                <span class="visually-hidden"> 
                    Loading... 
                </span> 
            </div> 
        </div> 
  
        <div class="clearfix float-none  
                    text-success"> 
            <div class="spinner-border  
                spinner-border-md" role="status"> 
                <span class="visually-hidden"> 
                    Loading... 
                </span> 
            </div> 
            <div class="spinner-grow  
                spinner-grow-md" role="status"> 
                <span class="visually-hidden"> 
                    Loading... 
                </span> 
            </div> 
        </div> 
  
        <div class="clearfix float-end  
            text-success"> 
            <div class="spinner-border" 
                style="width:2rem; height:2rem;" 
                role="status"> 
                <span class="visually-hidden"> 
                    Loading...</span> 
            </div> 
            <div class="spinner-grow" 
                style="width:2rem; height:2rem;" 
                role="status"> 
                <span class="visually-hidden"> 
                    Loading...</span> 
            </div> 
        </div> 
    </div> 
</body> 
  
</html>

Output:

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

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Bootstrap 5 Spinners Placement</title> 
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
        rel="stylesheet" integrity= 
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous"> 
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity= 
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
        crossorigin="anonymous"> 
    </script> 
</head> 
  
<body> 
    <div class="container text-center"> 
        <h1 class="text-success"> 
            GeeksforGeeks 
        </h1> 
  
        <h2>Bootstrap 5 Spinners Placement</h2> 
  
        <div class="text-center text-success"> 
            <div class="spinner-border  
                spinner-border-sm" role="status"> 
                <span class="visually-hidden"> 
                    Loading...</span> 
            </div> 
            <div class="spinner-grow  
                spinner-grow-sm" role="status"> 
                <span class="visually-hidden"> 
                    Loading...</span> 
            </div> 
        </div> 
  
        <div class="text-start text-success"> 
            <div class="spinner-border  
                spinner-border-md" role="status"> 
                <span class="visually-hidden"> 
                    Loading...</span> 
            </div> 
            <div class="spinner-grow  
                spinner-grow-md" role="status"> 
                <span class="visually-hidden"> 
                    Loading...</span> 
            </div> 
        </div> 
  
        <div class="text-end text-success"> 
            <div class="spinner-border" 
                style="width:2rem; height:2rem;"
                role="status"> 
                <span class="visually-hidden"> 
                    Loading...</span> 
            </div> 
            <div class="spinner-grow" 
                style="width:2rem; height:2rem;" 
                role="status"> 
                <span class="visually-hidden"> 
                    Loading...</span> 
            </div> 
        </div> 
    </div> 
</body> 
  
</html>

Output:

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

Suggest improvement

Bootstrap 5 Spinners SASS

Bootstrap 5 Spinners Flex Placements

Share your thoughts in the comments

Accordion Component

Badges Component

Breadcrumb Component

Button group Component

Close button Component

Collapse Component

Offcanvas Component

Progress Component

Scrollspy Component

Spinners Component

Bootstrap 5 Spinners Placement

HTML

HTML

HTML

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?