Bootstrap 5 Table with badges snippets

Badges Bootstrap 5Free+ CSS

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

3.9k views39 downloads5 years ago

gosnippets.com/preview/bootstrap-5-table-with-badges-snippets

Source Code

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>

More Badges snippets

Badge Collection

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

BadgesView →

Comments(0)

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

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>