Free Bootstrap 5 badge snippet — Bootstrap 5 Table with badges snippets. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.
1<div class="page-content page-container" id="page-content">
2 <div class="padding">
3 <div class="table-responsive">
4 <table class="table table-theme table-row v-middle">
5 <thead>
6 <tr>
7 <th class="text-muted" style="width:60px">Name</th>
8 <th class="text-muted"></th>
9 <td></td>
10 <th class="text-muted" style="width:50px">Light</th>
11 <th class="text-muted" style="width:110px">Circle</th>
12 <th class="text-muted" style="width:30px">xs</th>
13 </tr>
14 </thead>
15 <tbody>
16 <tr class="v-middle">
17 <td><a href="#" data-abc="true"><span class="badge bg-primary text-uppercase">Primary</span></a></td>
18 <td class="flex">
19 <div class="bg-light r r-3 py-1 my-1"></div>
20 <div class="bg-light r r-3 py-1 my-1 col-6"></div>
21 </td>
22 <td></td>
23 <td><span class="badge bg-primary-lt">14</span></td>
24 <td><span class="badge badge-circle text-primary"></span> <small class="text-muted">Primary</small></td>
25 <td><span class="badge badge-circle xs text-primary"></span></td>
26 </tr>
27 <tr class="v-middle">
28 <td><a href="#" data-abc="true"><span class="badge bg-info text-uppercase">Info</span></a></td>
29 <td class="flex">
30 <div class="bg-light r r-3 py-1 my-1"></div>
31 <div class="bg-light r r-3 py-1 my-1 col-6"></div>
32 </td>
33 <td></td>
34 <td><span class="badge bg-info-lt">50</span></td>
35 <td><span class="badge badge-circle text-info"></span> <small class="text-muted">Info</small></td>
36 <td><span class="badge badge-circle xs text-info"></span></td>
37 </tr>
38 <tr class="v-middle">
39 <td><a href="#" data-abc="true"><span class="badge bg-success text-uppercase">Success</span></a></td>
40 <td class="flex">
41 <div class="bg-light r r-3 py-1 my-1"></div>
42 <div class="bg-light r r-3 py-1 my-1 col-6"></div>
43 </td>
44 <td></td>
45 <td><span class="badge bg-success-lt">75</span></td>
46 <td><span class="badge badge-circle text-success"></span> <small class="text-muted">Success</small></td>
47 <td><span class="badge badge-circle xs text-success"></span></td>
48 </tr>
49 <tr class="v-middle">
50 <td><a href="#" data-abc="true"><span class="badge bg-warning text-uppercase">Warning</span></a></td>
51 <td class="flex">
52 <div class="bg-light r r-3 py-1 my-1"></div>
53 <div class="bg-light r r-3 py-1 my-1 col-6"></div>
54 </td>
55 <td></td>
56 <td><span class="badge bg-warning-lt">30</span></td>
57 <td><span class="badge badge-circle text-warning"></span> <small class="text-muted">Warning</small></td>
58 <td><span class="badge badge-circle xs text-warning"></span></td>
59 </tr>
60 <tr class="v-middle">
61 <td><a href="#" data-abc="true"><span class="badge bg-danger text-uppercase">Danger</span></a></td>
62 <td class="flex">
63 <div class="bg-light r r-3 py-1 my-1"></div>
64 <div class="bg-light r r-3 py-1 my-1 col-6"></div>
65 </td>
66 <td></td>
67 <td><span class="badge bg-danger-lt">65</span></td>
68 <td><span class="badge badge-circle text-danger"></span> <small class="text-muted">Danger</small></td>
69 <td><span class="badge badge-circle xs text-danger"></span></td>
70 </tr>
71 <tr class="v-middle">
72 <td><a href="#" data-abc="true"><span class="badge bg-secondary text-uppercase">Secondary</span></a></td>
73 <td class="flex">
74 <div class="bg-light r r-3 py-1 my-1"></div>
75 <div class="bg-light r r-3 py-1 my-1 col-6"></div>
76 </td>
77 <td></td>
78 <td><span class="badge bg-secondary-lt">35</span></td>
79 <td><span class="badge badge-circle text-secondary"></span> <small class="text-muted">Secondary</small></td>
80 <td><span class="badge badge-circle xs text-secondary"></span></td>
81 </tr>
82 <tr class="v-middle">
83 <td><a href="#" data-abc="true"><span class="badge bg-dark text-uppercase">Dark</span></a></td>
84 <td class="flex">
85 <div class="bg-light r r-3 py-1 my-1"></div>
86 <div class="bg-light r r-3 py-1 my-1 col-6"></div>
87 </td>
88 <td></td>
89 <td><span class="badge bg-dark-lt">20</span></td>
90 <td><span class="badge badge-circle text-dark"></span> <small class="text-muted">Dark</small></td>
91 <td><span class="badge badge-circle xs text-dark"></span></td>
92 </tr>
93 </tbody>
94 </table>
95 </div>
96 </div>
97</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.