Bootstrap 5 Spinners Size

Last Updated : 09 Nov, 2022

Bootstrap 5 Spinners Size is used to create spinners in different sizes. For small-size spinners, we will use .spinner-border-sm class, and for small-size grow to shrink spinners, we will use .spinner-grow-sm class.

Spinners Size used Classes:

.spinner-border-sm: It is used to create small-size spinners.
.spinner-border-md: It is used to create medium size spinners.
.spinner-grow-sm: It is used to create small-size grow shrink spinners.
.spinner-grow-md: It is used to create medium size grow shrink spinners.

Note: We can use customized CSS styles for different-size spinners.

Syntax:

<div class="spinner-border spinner-border-sm" 
    role="status">
      <span class="visually-hidden">Loading...</span>
</div>

Example 1: In this example, we will create different sizes of spinners.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Bootstrap 5 Spinners Size</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 Size</h2> 
  
        <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 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 class="spinner-border" 
            style="width: 3rem; height: 3rem;" 
            role="status"> 
            <span class="visually-hidden">Loading...</span> 
        </div> 
        <div class="spinner-grow" 
            style="width: 3rem; height: 3rem;" role="status"> 
            <span class="visually-hidden">Loading...</span> 
        </div> 
    </div> 
</body> 
  
</html>

Output:

Example 2: In this example, we will create different sizes of button spinners in different colors.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Bootstrap 5 Spinners Size</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 Size</h2> 
  
        <!-- Small size spinners -->
        <button class="btn btn-success" type="button"> 
            <span class="spinner-grow text-white  
                spinner-grow-sm" role="status"></span> 
            <span class="visually-hidden">Loading...</span> 
        </button> 
  
        <button class="btn btn-success" type="button"> 
            <span class="spinner-border spinner-border-sm" 
                role="status"></span> 
            <span class="visually-hidden">Loading...</span> 
        </button> 
        <br><br> 
  
        <!-- Medium size spinners -->
        <button class="btn btn-primary" type="button"> 
            <span class="spinner-grow text-white  
                spinner-grow-md" role="status"></span> 
            <span class="visually-hidden">Loading...</span> 
        </button> 
  
        <button class="btn btn-primary" type="button"> 
            <span class="spinner-border spinner-border-md" 
                role="status"></span> 
            <span class="visually-hidden">Loading...</span> 
        </button> 
    </div> 
</body> 
  
</html>