Bootstrap 5 social media post feed with comment section

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

Source Code

More Utilities snippets

Comments(0)

Working in Tailwind? Explore our Tailwind gallery