Bootstrap 5 Spinners Size

Last Updated : 01 Aug, 2024

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/[email protected]/dist/css/bootstrap.min.css" 
        rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/css/bootstrap.min.css" 
        rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>