Utilities Bootstrap 5Free+ CSS
Beautiful CSS comment snippet with reply — a free Bootstrap 5 utility snippet. Copy the HTML & CSS and paste straight into your Bootstrap 5 project.
3.1k views48 downloads
gosnippets.com/preview/beautiful-css-comment-snippet-with-reply
Source Code
1<!-- Main Container -->
2 <div class="comments-container">
3 <h1>Comments <a href="https://gosnippets.com/">Go Snippets</a></h1>
4
5 <ul id="comments-list" class="comments-list">
6 <li>
7 <div class="comment-main-level">
8 <!-- Avatar -->
9 <div class="comment-avatar"><img src="https://i.imgur.com/k7XVwpB.jpeg" alt=""></div>
10 <!-- Comments -->
11 <div class="comment-box">
12 <div class="comment-head">
13 <h6 class="comment-name by-author"><a href="#">Ravi Raushan</a></h6>
14 <span>55 minutes ago</span>
15 <i class="fa fa-reply"></i>
16 <i class="fa fa-heart"></i>
17 </div>
18 <div class="comment-content">
19 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit omnis animi et iure laudantium vitae, praesentium optio, sapiente distinctio illo?
20 </div>
21 </div>
22 </div>
23 <!-- Comment list -->
24 <ul class="comments-list reply-list">
25 <li>
26 <!-- Avatar -->
27 <div class="comment-avatar"><img src="https://i.imgur.com/m2O0ykv.jpeg" alt=""></div>
28 <!-- Comment Container -->
29 <div class="comment-box">
30 <div class="comment-head">
31 <h6 class="comment-name"><a href="https://gosnippets.com/">Laddu Singh</a></h6>
32 <span>10 minutes ago</span>
33 <i class="fa fa-reply"></i>
34 <i class="fa fa-heart"></i>
35 </div>
36 <div class="comment-content">
37 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit omnis animi et iure laudantium vitae, praesentium optio, sapiente distinctio illo?
38 </div>
39 </div>
40 </li>
41
42 <li>
43 <!-- Avatar -->
44 <div class="comment-avatar"><img src="https://i.imgur.com/k7XVwpB.jpeg" alt=""></div>
45 <!-- Comment Container -->
46 <div class="comment-box">
47 <div class="comment-head">
48 <h6 class="comment-name by-author"><a href="#">Ravi Raushan</a></h6>
49 <span>10 minutes ago</span>
50 <i class="fa fa-reply"></i>
51 <i class="fa fa-heart"></i>
52 </div>
53 <div class="comment-content">
54 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit omnis animi et iure laudantium vitae, praesentium optio, sapiente distinctio illo?
55 </div>
56 </div>
57 </li>
58 </ul>
59 </li>
60
61 <li>
62 <div class="comment-main-level">
63 <!-- Avatar -->
64 <div class="comment-avatar"><img src="https://i.imgur.com/WYpIaBW.jpeg" alt=""></div>
65 <!-- Contenedor del Comentario -->
66 <div class="comment-box">
67 <div class="comment-head">
68 <h6 class="comment-name"><a href="#">Ramdas Gupta</a></h6>
69 <span>10 minutes ago</span>
70 <i class="fa fa-reply"></i>
71 <i class="fa fa-heart"></i>
72 </div>
73 <div class="comment-content">
74 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit omnis animi et iure laudantium vitae, praesentium optio, sapiente distinctio illo?
75 </div>
76 </div>
77 </div>
78 </li>
79 </ul>
80 </div>More Utilities snippets
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.
UtilitiesView →
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.
UtilitiesView →
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.
UtilitiesView →
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.