Badge Collection | GoSnippets

Badges Bootstrap 5Free

Badge Collection — a free Bootstrap 5 badge snippet. Copy the HTML and paste straight into your Bootstrap 5 project.

2.3k views612 downloadslast year

gosnippets.com/preview/badge-collection

Source Code

1<div class="container py-4">
2  <!-- Color variants -->
3  <h6 class="text-muted fw-semibold small mb-3">Color Variants</h6>
4  <div class="d-flex flex-wrap gap-2 mb-4">
5    <span class="badge bg-primary">Primary</span>
6    <span class="badge bg-secondary">Secondary</span>
7    <span class="badge bg-success">Success</span>
8    <span class="badge bg-danger">Danger</span>
9    <span class="badge bg-warning text-dark">Warning</span>
10    <span class="badge bg-info text-dark">Info</span>
11    <span class="badge bg-light text-dark border">Light</span>
12    <span class="badge bg-dark">Dark</span>
13  </div>
14  <!-- Pill badges -->
15  <h6 class="text-muted fw-semibold small mb-3">Pill Badges</h6>
16  <div class="d-flex flex-wrap gap-2 mb-4">
17    <span class="badge rounded-pill bg-primary">New</span>
18    <span class="badge rounded-pill bg-success">Active</span>
19    <span class="badge rounded-pill bg-danger">Urgent</span>
20    <span class="badge rounded-pill bg-warning text-dark">Pending</span>
21  </div>
22  <!-- Notification counts on buttons -->
23  <h6 class="text-muted fw-semibold small mb-3">Notification Badges</h6>
24  <div class="d-flex flex-wrap gap-3 mb-4">
25    <button type="button" class="btn btn-outline-primary position-relative">
26      Inbox
27      <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">5</span>
28    </button>
29    <button type="button" class="btn btn-outline-secondary position-relative">
30      Notifications
31      <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-primary">12+</span>
32    </button>
33  </div>
34  <!-- Soft / subtle badges -->
35  <h6 class="text-muted fw-semibold small mb-3">Soft Variants</h6>
36  <div class="d-flex flex-wrap gap-2">
37    <span class="badge rounded-pill px-3 py-2" style="background:#E8F0FB;color:#1B3A6B;">Bootstrap</span>
38    <span class="badge rounded-pill px-3 py-2" style="background:#d1fae5;color:#065f46;">Open Source</span>
39    <span class="badge rounded-pill px-3 py-2" style="background:#fef3c7;color:#92400e;">Free</span>
40  </div>
41</div>

More Badges snippets

Bootstrap 5 Table with badges snippets

Free Bootstrap 5 badge snippet — Bootstrap 5 Table with badges snippets. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.

BadgesView →

Comments(0)

No comments yet — be the first to start the discussion.

1<div class="container py-4"> 2  3 <h6 class="text-muted fw-semibold small mb-3">Color Variants</h6> 4 <div class="d-flex flex-wrap gap-2 mb-4"> 5 <span class="badge bg-primary">Primary</span> 6 <span class="badge bg-secondary">Secondary</span> 7 <span class="badge bg-success">Success</span> 8 <span class="badge bg-danger">Danger</span> 9 <span class="badge bg-warning text-dark">Warning</span> 10 <span class="badge bg-info text-dark">Info</span> 11 <span class="badge bg-light text-dark border">Light</span> 12 <span class="badge bg-dark">Dark</span> 13 </div> 14  15 <h6 class="text-muted fw-semibold small mb-3">Pill Badges</h6> 16 <div class="d-flex flex-wrap gap-2 mb-4"> 17 <span class="badge rounded-pill bg-primary">New</span> 18 <span class="badge rounded-pill bg-success">Active</span> 19 <span class="badge rounded-pill bg-danger">Urgent</span> 20 <span class="badge rounded-pill bg-warning text-dark">Pending</span> 21 </div> 22  23 <h6 class="text-muted fw-semibold small mb-3">Notification Badges</h6> 24 <div class="d-flex flex-wrap gap-3 mb-4"> 25 <button type="button" class="btn btn-outline-primary position-relative"> 26 Inbox 27 <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">5</span> 28 </button> 29 <button type="button" class="btn btn-outline-secondary position-relative"> 30 Notifications 31 <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-primary">12+</span> 32 </button> 33 </div> 34  35 <h6 class="text-muted fw-semibold small mb-3">Soft Variants</h6> 36 <div class="d-flex flex-wrap gap-2"> 37 <span class="badge rounded-pill px-3 py-2" style="background:#E8F0FB;color:#1B3A6B;">Bootstrap</span> 38 <span class="badge rounded-pill px-3 py-2" style="background:#d1fae5;color:#065f46;">Open Source</span> 39 <span class="badge rounded-pill px-3 py-2" style="background:#fef3c7;color:#92400e;">Free</span> 40 </div> 41</div>