Can I use "Bootstrap 5 social media post feed with comment section" 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 social media post feed with comment section — Free Utilities Snippet (Bootstrap 5)

Loading…

1<section class="profile-feed"> 2 <div class="container"> 3 <div class="row"> 4 5 <div class="col-lg-6 offset-lg-3"> 6 7 <div class="cardbox shadow-lg bg-white"> 8 9 <div class="cardbox-heading"> 10  11 <div class="dropdown float-end"> 12 <button class="btn btn-flat btn-flat-icon" type="button" data-bs-toggle="dropdown" aria-expanded="false"> 13 <em class="fa fa-ellipsis-h"></em> 14 </button> 15 <div class="dropdown-menu dropdown-scale dropdown-menu-end" role="menu" style="position: absolute; transform: translate3d(-136px, 28px, 0px); top: 0px; left: 0px; will-change: transform;"> 16 <a class="dropdown-item" href="#">Hide post</a> 17 <a class="dropdown-item" href="#">Stop following</a> 18 <a class="dropdown-item" href="#">Report</a> 19 </div> 20 </div> 21 <div class="d-flex m-0"> 22 <div class="d-flex me-3"> 23 <a href=""><img class="img-fluid rounded-circle" src="https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg" alt="User"></a> 24 </div> 25 <div class="flex-grow-1 ms-3"> 26 <p class="m-0">Emma Robinson</p> 27 <small><span><i class="icon ion-md-pin"></i> London, England</span></small> 28 <small><span><i class="icon ion-md-time"></i> 1 hour ago</span></small> 29 </div> 30 </div> 31 </div> 32 33 <div class="cardbox-item"> 34 <img class="img-fluid" src="https://images.pexels.com/photos/1152994/pexels-photo-1152994.jpeg" alt="Image"> 35 </div> 36 <div class="cardbox-base"> 37 <ul class="float-end"> 38 <li><a><i class="fa fa-comments"></i></a></li> 39 <li><a><em class="me-5">46</em></a></li> 40 <li><a><i class="fa fa-share-alt"></i></a></li> 41 <li><a><em class="me-3">05</em></a></li> 42 </ul> 43 <ul> 44 <li><a><i class="fa fa-thumbs-up"></i></a></li> 45 <li><a href="#"><img src="https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg" class="img-fluid rounded-circle" alt="User"></a></li> 46 <li><a href="#"><img src="https://images.pexels.com/photos/1130626/pexels-photo-1130626.jpeg" class="img-fluid rounded-circle" alt="User"></a></li> 47 <li><a href="#"><img src="https://images.pexels.com/photos/2379005/pexels-photo-2379005.jpeg" class="img-fluid rounded-circle" alt="User"></a></li> 48 <li><a href="#"><img src="https://images.pexels.com/photos/6962108/pexels-photo-6962108.jpeg" class="img-fluid rounded-circle" alt="User"></a></li> 49 <li><a><span>242 Likes</span></a></li> 50 </ul> 51 </div> 52 <div class="cardbox-comments"> 53 <span class="comment-avatar float-start"> 54 <a href=""><img class="rounded-circle" src="https://images.pexels.com/photos/2811087/pexels-photo-2811087.jpeg" alt="..."></a> 55 </span> 56 <div class="search"> 57 <input placeholder="Write a comment" type="text"> 58 <button><i class="fa fa-camera"></i></button> 59 </div> 60 </div> 61 62 </div> 63 64 </div> 65 <div class="col-lg-3"> 66 <div class="shadow-lg p-4 mb-2 bg-white author"> 67 <a href="https://www.geekyshadow.com/">Get technology knowledge from Geeky Shadow in hindi</a> 68 <p>Geeky Shadow</p> 69 </div> 70 </div> 71 72 </div> 73 </div> 74 </section>

Bootstrap 5 social media post feed with comment section

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