Tables Bootstrap 5Free+ CSS
Add a table to your UI with Bootstrap 5 Meeting status table with user info snippet. Free Bootstrap 5 code — HTML & CSS ready to copy, MIT licensed.
16.8k views683 downloads
gosnippets.com/preview/bootstrap-5-meeting-status-table-with-user-info-snippet
Source Code
1<div class="container rounded mt-5 bg-white p-md-5">
2 <div class="h2 font-weight-bold">Meetings</div>
3 <div class="table-responsive">
4 <table class="table">
5 <thead>
6 <tr>
7 <th scope="col">Name</th>
8 <th scope="col">Date</th>
9 <th scope="col">Time</th>
10 <th scope="col">Status</th>
11 </tr>
12 </thead>
13 <tbody>
14 <tr class="bg-blue">
15 <td class="pt-2"> <img src="https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded-circle" alt="">
16 <div class="ps-lg-5 ps-md-3 ps-1 name">Emilia Kollette</div>
17 </td>
18 <td class="pt-3 mt-1">25 Sep 2020</td>
19 <td class="pt-3">11:00 AM</td>
20 <td class="pt-3"><span class="fa fa-check ps-3"></span></td>
21 <td class="pt-3"><span class="fa fa-ellipsis-v btn"></span></td>
22 </tr>
23 <tr id="spacing-row">
24 <td></td>
25 </tr>
26 <tr class="bg-blue">
27 <td class="pt-2"> <img src="https://images.pexels.com/photos/3765114/pexels-photo-3765114.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" class="rounded-circle" alt="">
28 <div class="ps-lg-5 ps-md-3 ps-1 name">Anny Adams</div>
29 </td>
30 <td class="pt-3">26 Sep 2020</td>
31 <td class="pt-3">11:00 AM</td>
32 <td class="pt-3"><span class="fa fa-check ps-3"></span></td>
33 <td class="pt-3"><span class="fa fa-ellipsis-v btn"></span></td>
34 </tr>
35 <tr id="spacing-row">
36 <td></td>
37 </tr>
38 <tr class="bg-blue">
39 <td class="pt-2"> <img src="https://images.pexels.com/photos/3779448/pexels-photo-3779448.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded-circle" alt="">
40 <div class="ps-lg-5 ps-md-3 ps-1 name">Arnold Linn</div>
41 </td>
42 <td class="pt-3">26 Sep 2020</td>
43 <td class="pt-3">02:00 PM</td>
44 <td class="pt-3"><span class="fa fa-check ps-3"></span></td>
45 <td class="pt-3"><span class="fa fa-ellipsis-v btn"></span></td>
46 </tr>
47 <tr id="spacing-row">
48 <td></td>
49 </tr>
50 <tr class="bg-blue">
51 <td class="pt-2"> <img src="https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded-circle" alt="">
52 <div class="ps-lg-5 ps-md-3 ps-1 name">Josh Limosel</div>
53 </td>
54 <td class="pt-3">26 Sep 2020</td>
55 <td class="pt-3">04:00 PM</td>
56 <td class="pt-3"><span class="fa fa-minus ps-3"></span></td>
57 <td class="pt-3"><span class="fa fa-ellipsis-v btn"></span></td>
58 </tr>
59 </tbody>
60 </table>
61 </div>
62</div>
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.