VOOZH about

URL: https://www.geeksforgeeks.org/bootstrap/bootstrap-5-spinners-size/

⇱ Bootstrap 5 Spinners Size - GeeksforGeeks

  • Courses
  • Tutorials
  • Interview Prep

Bootstrap 5 Spinners Size

Last Updated : 1 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.

Output:

👁 size-

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

Output:

👁 size-1

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

Comment

Explore