Can I use "Bootstrap 5 comment section with emojis icons snippets" in commercial projects?

Yes. All GoSnippets are MIT licensed for personal and commercial use without attribution.

Does this snippet include Bootstrap?

This example targets Bootstrap 5. Copy the HTML/CSS/JS into your layout after loading Bootstrap CSS and JS from CDN or npm.

Bootstrap 5 comment section with emojis icons snippets — Free Utilities Snippet (Bootstrap 5)

Loading…

1<div class="container mt-5"> 2 <div class="row d-flex justify-content-center"> 3 <div class="col-md-7"> 4 <div class="shadow p-3 bg-white rounded"> 5 <div class="d-flex justify-content-between align-items-center"> 6 <div class="d-flex flex-row align-items-center"> <span class="me-1 fs-14">Sort By Newest</span> <span class="carets"><i class="fa fa-caret-down"></i></span> </div> 7 <div class="d-flex flex-row align-items-center"> <span class="me-1 fs-14">Kyle Lawrence</span> <span class="carets"><i class="fa fa-caret-down"></i></span> </div> 8 </div> 9 <div class="mt-5 d-flex flex-row"> <img src="https://i.imgur.com/jD4jCW9.png" width="40" height="40"> 10 <div class="w-100 ms-2 comment-area"> <textarea class="form-control"></textarea> 11 <ul class="emojis"> 12 <li class="me-2"><img src="https://i.imgur.com/VZy5vik.png" width="30"></li> 13 <li class="me-2"><img src="https://i.imgur.com/AIrm2Yu.png" width="30"></li> 14 <li class="me-2"><img src="https://i.imgur.com/v8pgJxy.png" width="30"></li> 15 <li><img src="https://i.imgur.com/lWLKSZO.png" width="30"></li> 16 </ul> <button class="btn btn-secondary w-100 mt-2 post-btn">Post</button> </div> 17 </div> 18 <div class="d-flex flex-row mt-4"> <img src="https://i.imgur.com/jD4jCW9.png" width="40" height="40"> 19 <div class="ms-2 w-100"> 20 <div class="d-flex justify-content-between align-items-center"> 21 <div class="d-flex flex-row align-items-center"> <span class="font-weight-bold name">Mark Hamilton <i class="fa fa-heart"></i></span> <span class="dots"></span> <small class="text-muted time-text">1h</small> </div> <span class="top-comment">Top comment <i class="fa fa-star"></i></span> 22 </div> 23 <p class="user-comment-text text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 24 <div class="mt-3 d-flex align-items-center"> <span class="fs-13">Reply</span> <span class="dots"></span> <span class="fs-13">100 likes</span> <span class="dots"></span> <span> <i class="fa fa-thumbs-up"></i> <i class="fa fa-thumbs-down"></i> </span> </div> 25 </div> 26 </div> 27 </div> 28 </div> 29 </div> 30</div>

Bootstrap 5 comment section with emojis icons snippets

How to use this snippet

Customization tips

Best for

Accessibility notes

Responsive design

Source Code

More Utilities snippets

Comments(0)

Working in Tailwind? Explore our Tailwind gallery

Ocean Depth Neumorphic Music Player with Waveform Scrubber

Cyberpunk AI Chat Dashboard with Dynamic Orbital Glow

Aurora Mint Neumorphic Event Scheduler with Drag Selection