Badges and Spinners

Badges and Spinners

<!-- Badges -->
<span class="badge bg-primary">New</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">5</span>
<span class="badge rounded-pill bg-warning">42</span>

<!-- Badge on button -->
<button class="btn btn-primary">
    Notifications <span class="badge bg-danger">4</span>
</button>

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

<!-- Spinner sizes -->
<div class="spinner-border spinner-border-sm"></div>

<!-- Spinner inside button -->
<button class="btn btn-primary" disabled>
    <span class="spinner-border spinner-border-sm me-1"></span>
    Saving...
</button>