Bootstrap 5 user comment section template snippets: a hand-crafted, open-source Bootstrap 5 utility. HTML & CSS included, ready to copy.
1<div class="container mt-5 mb-5">
2 <div class="row height d-flex justify-content-center align-items-center">
3 <div class="col-md-7">
4 <div class="card">
5 <div class="p-3">
6 <h6>Comments</h6>
7 </div>
8 <div class="mt-3 d-flex flex-row align-items-center p-3 form-color"> <img src="https://i.imgur.com/zQZSWrt.jpg" width="50" class="rounded-circle me-2"> <input type="text" class="form-control" placeholder="Enter your comment..."> </div>
9 <div class="mt-2">
10 <div class="d-flex flex-row p-3"> <img src="https://i.imgur.com/zQZSWrt.jpg" width="40" height="40" class="rounded-circle me-3">
11 <div class="w-100">
12 <div class="d-flex justify-content-between align-items-center">
13 <div class="d-flex flex-row align-items-center"> <span class="me-2">Brian selter</span> <small class="c-badge">Top Comment</small> </div> <small>12h ago</small>
14 </div>
15 <p class="text-justify comment-text mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
16 <div class="d-flex flex-row user-feed"> <span class="wish"><i class="fa fa-heartbeat me-2"></i>24</span> <span class="ms-3"><i class="fa fa-comments-o me-2"></i>Reply</span> </div>
17 </div>
18 </div>
19 <div class="d-flex flex-row p-3"> <img src="https://i.imgur.com/3J8lTLm.jpg" width="40" height="40" class="rounded-circle me-3">
20 <div class="w-100">
21 <div class="d-flex justify-content-between align-items-center">
22 <div class="d-flex flex-row align-items-center"> <span class="me-2">Seltos Majito</span> <small class="c-badge">Top Comment</small> </div> <small>2h ago</small>
23 </div>
24 <p class="text-justify comment-text mb-0">Tellus in hac habitasse platea dictumst vestibulum. Lectus nulla at volutpat diam ut venenatis tellus. Aliquam etiam erat velit scelerisque in dictum non consectetur. Sagittis nisl rhoncus mattis rhoncus urna neque viverra justo nec. Tellus cras adipiscing enim eu turpis egestas pretium aenean pharetra. Aliquam faucibus purus in massa.</p>
25 <div class="d-flex flex-row user-feed"> <span class="wish"><i class="fa fa-heartbeat me-2"></i>14</span> <span class="ms-3"><i class="fa fa-comments-o me-2"></i>Reply</span> </div>
26 </div>
27 </div>
28 <div class="d-flex flex-row p-3"> <img src="https://i.imgur.com/agRGhBc.jpg" width="40" height="40" class="rounded-circle me-3">
29 <div class="w-100">
30 <div class="d-flex justify-content-between align-items-center">
31 <div class="d-flex flex-row align-items-center"> <span class="me-2">Maria Santola</span> <small class="c-badge">Top Comment</small> </div> <small>12h ago</small>
32 </div>
33 <p class="text-justify comment-text mb-0"> Id eu nisl nunc mi ipsum faucibus. Massa massa ultricies mi quis hendrerit dolor. Arcu bibendum at varius vel pharetra vel turpis nunc eget. Habitasse platea dictumst quisque sagittis purus sit amet volutpat. Urna condimentum mattis pellentesque id.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
34 <div class="d-flex flex-row user-feed"> <span class="wish"><i class="fa fa-heartbeat me-2"></i>54</span> <span class="ms-3"><i class="fa fa-comments-o me-2"></i>Reply</span> </div>
35 </div>
36 </div>
37 </div>
38 </div>
39 </div>
40 </div>
41</div>
Auto move mouse cursor snippet
Auto move mouse cursor snippet: a hand-crafted, open-source Bootstrap 5 utility. HTML, CSS & JS included, ready to copy.
Bootstrap 5 Ecommerce Product Detail Page Design snippet
Free Bootstrap 5 utility snippet — Bootstrap 5 Ecommerce Product Detail Page Design snippet. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.
Bootstrap 5 Ecommerce single product page design template
Free Bootstrap 5 utility snippet — Bootstrap 5 Ecommerce single product page design template. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.