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 downloads
gosnippets.com/preview/badge-collection
Loading…
Badge Collection — a free Bootstrap 5 badge snippet. Copy the HTML and paste straight into your Bootstrap 5 project.
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>Hand-crafted Tailwind CSS components — HTML or React, copy-paste ready, with live previews. Free forever, MIT licensed, no sign-up to use.
24
Components
13
Views
6
Likes
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.