BootstrapHow-ToBeginner · 3 min read

How to Create Spinner in Bootstrap: Simple Guide

To create a spinner in Bootstrap, use the spinner-border or spinner-grow classes inside a div element. Add optional size and color classes like spinner-border-sm or text-primary to customize the spinner's appearance.

📐

Syntax

Bootstrap provides two main spinner types: spinner-border and spinner-grow. You place these classes on a div element to show a spinner. You can add size classes like spinner-border-sm for smaller spinners and color utility classes like text-primary to change spinner color.

html

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

<div class="spinner-grow text-primary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

Output

Two spinners appear: one with a rotating border and one with a growing circle in primary color.

💻

Example

This example shows a basic spinner with default size and color, and a small blue spinner using Bootstrap classes.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Spinner Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="m-3">
    <div class="spinner-border" role="status">
      <span class="visually-hidden">Loading...</span>
    </div>
    <div class="spinner-grow text-primary spinner-grow-sm ms-3" role="status">
      <span class="visually-hidden">Loading...</span>
    </div>
  </div>
</body>
</html>

Output

A page with two spinners side by side: a default gray spinner and a small blue spinner with some space between them.

⚠️

Common Pitfalls

Forgetting the role="status" and span with visually-hidden text reduces accessibility for screen readers.
Using spinner classes on elements other than div may cause unexpected behavior.
Not including Bootstrap CSS will result in no spinner visible.
Mixing spinner-border and spinner-grow classes on the same element does not work.

html

<!-- Wrong: Missing role and visually-hidden text -->
<div class="spinner-border"></div>

<!-- Right: Include role and hidden text for accessibility -->
<div class="spinner-border" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

📊

Quick Reference

Class	Description
spinner-border	Shows a rotating border spinner
spinner-grow	Shows a growing circle spinner
spinner-border-sm	Smaller size for spinner-border
spinner-grow-sm	Smaller size for spinner-grow
text-primary, text-success, etc.	Change spinner color using text color utilities
visually-hidden	Hides text visually but keeps it for screen readers

✅

Key Takeaways

Use spinner-border or spinner-grow classes on a div to create spinners.

Add role="status" and a span with visually-hidden text for accessibility.

Customize spinner size with spinner-border-sm or spinner-grow-sm classes.

Change spinner color using Bootstrap text color utility classes like text-primary.

Always include Bootstrap CSS for spinners to display correctly.