"Bootstrap 5 social post card"
Bootstrap 4.1.1 Snippet by emremusaoglu

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Potofive</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> </head> <body> <div id="wrapper"> <div id="header"> </div> <!-- /header --> <div id="content"> <div class="container-xxl my-5"> <div class="row"> <div class="col-lg-3"> <div class="post-box"> <div class="post-box-header"> <div class="post-user"> <div class="post-user-img"> <img src="https://placehold.co/38x38" alt="" srcset="" class="rounded-1"> </div> <div class="post-user-desc"> <p class="mb-0 pb-0"> <small><a href="">Emre Musaoğlu</a></small> </p> <p class="mb-0 pb-0"> <small>Kastamonu</small> </p> </div> </div> <div class="post-date"> <small>17 Eylül 2024</small> <small class="tx-right">18:06</small> </div> </div> <div class="post-box-body"> <a href=""><h6 class="fw-normal mb-1">Sana uyanan her sabah</h6></a> <p class="mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam hic recusandae, nulla sint doloremque itaque reprehenderit veritatis ex quae velit ipsum et possimus repellendus, minima vitae quo qui officia inventore...</p> </div> <div class="post-box-footer"> <span> <a href="" class="text-dark" data-bs-toggle="collapse" data-bs-target=".cArea"><i class="far fa-comments me-1"></i> 16</a> </span> <span><i class="far fa-thumbs-up me-1"></i> 98</span> <span><small><a href="" class="text-decoration-none">Nazım (Şiir)</a></small></span> <span> <div class="dropdown"> <a href="" data-bs-toggle="dropdown"><i class="fa fa-ellipsis-h"></i></a> <ul class="dropdown-menu post-drop dropdown-menu-end"> <li><a class="dropdown-item" href="#"><i class="far fa-share-alt me-1"></i>Paylaş</a></li> <li><a class="dropdown-item" href="#"><i class="far fa-shield-exclamation me-1"></i>Bildir</a></li> </ul> </div> </span> </div> <div class="collapse border-top cArea p-3"> <form action="" method="post"> <input type="text" name="" id="" class="form-control" placeholder="Yorum gönder..."> </form> </div> </div> </div> </div> </div> </div> <!-- /content --> </div> <!-- /wrapper --> <!-- /scripts --> </body> </html>
@charset "utf-8"; @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap'); body { font-size: .830rem; font-family: 'Outfit' , Arial, Helvetica, sans-serif; } .form-control:not(.form-control-lg) { font-size: .830rem; border-radius: .25rem; } .form-control:focus { border-color: #d1d1d1; box-shadow: 0 0 0 .15rem rgba(92, 105, 124, 0.185) } .dropdown-item { font-size: .830rem; width: auto; border-radius: .25rem; margin: 0 .50rem; } .post-box { box-shadow: 0px 1px 2px rgba(0,0,0,.10); border: 1px solid #ddd; border-radius: .25rem; } .post-box-header { display: flex; align-items: center; justify-content: space-between; padding: .75rem 1rem; border-bottom: 1px solid #dddd; } .post-user { display: flex; flex-direction: row; } .post-date { display: flex; flex-direction: column; } .post-user-img { margin-right: .50rem; } .post-box a:not(.post-box .dropdown-menu .dropdown-item) { text-decoration: none; color: #6439FF; } .post-box a:hover:not(.post-box .dropdown-menu .dropdown-item) { color: #4022af; } .post-box-body { padding: .75rem 1rem; } .post-box-footer { border-top: 1px solid #ddd; display: flex; align-items: center; justify-content: space-between; padding: .75rem 1rem; } .collapsing { -webkit-transition: none; transition: none; display: none; } .tx-right { text-align: right; } .post-drop { min-width: auto; } .dropdown-menu { border-radius: .25rem; box-shadow: 0px 1px 2px rgba(0,0,0,.10); } .dropdown-item:active { background-color: #212121; color: #ffffff; }

Related: See More

Datepicker
Bootstrap 4 Social Network Post - TheMashaBrand
Bootstrap Social Card
Navbar with Social icon & Dropdown

Questions / Comments: