"bootstrap 4 - social network post and comment card with form"
Bootstrap 4.1.1 Snippet by provks

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="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous"> <title>Test2</title> <style> .h7 { font-size: 0.9rem } </style> </head> <body> <div class="container-fluid my-5"> <div class="row"> <div class="col-3"> <div class="card"> <div class="card-body"> <h5 class="card-title">Special title treatment</h5> <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-sm btn-primary">Go somewhere</a> </div> </div> </div> <div class="col-6"> <!--- Post Form Begins --> <section class="card"> <div class="card-header"> <ul class="nav nav-tabs card-header-tabs" id="myTab" role="tablist"> <li class="nav-item"> <a class="nav-link active" id="posts-tab" data-toggle="tab" href="#posts" role="tab" aria-controls="posts" aria-selected="true">Make a Post</a> </li> </ul> </div> <div class="card-body"> <div class="tab-content" id="myTabContent"> <div class="tab-pane fade show active" id="posts" role="tabpanel" aria-labelledby="posts-tab"> <div class="form-group"> <label class="sr-only" for="message">post</label> <textarea class="form-control" id="message" rows="3" placeholder="What are you thinking..."></textarea> </div> </div> </div> <div class="text-right"> <button type="submit" class="btn btn-primary">share</button> </div> </div> </section> <!--- Post Form Ends --> <!-- Post Begins --> <section class="card mt-4"> <div class="border p-2"> <!-- post header --> <div class="row m-0"> <div class=""> <a class="text-decoration-none" href="#"> <img class="" src="https://cdn3.iconfinder.com/data/icons/avatars-round-flat/33/avat-01-512.png" width="50" height="50" alt="..."> </a> </div> <div class="flex-grow-1 pl-2"> <a class="text-decoration-none" href="#"> <h2 class="text-capitalize h5 mb-0">Shushant Singh</h2> </a> <p class="small text-secondary m-0 mt-1">1 day ago</p> </div> <div class="dropdown"> <a class="" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="fas fa-chevron-down"></i> </a> <div class="dropdown-menu" aria-labelledby="dropdownMenuLink"> <a class="dropdown-item text-primary" href="#">Edit</a> <a class="dropdown-item text-primary" href="#">Delete</a> </div> </div> </div> <!-- post body --> <div class=""> <p class="my-2"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras turpis sem, dictum id bibendum eget, malesuada ut massa. Ut scel erisque nulla sed luctus dapibus. Nulla sit amet mi vitae purus sol licitudin venenatis. Praesent et sem urna. Integer vitae lectus nis l. Fusce sapien ante, tristique efficitur lorem et, laoreet ornare lib ero. Nam fringilla leo orci. Vivamus semper quam nunc, sed ornare magna dignissim sed. Etiam interdum justo quis risus efficitur dictum. Nunc ut pulvinar quam. N unc mollis, est a dapibus dignissim, eros elit tempor diam, eu tempus quam felis eu velit. </p> </div> <hr class="my-1"> <!-- post footer begins --> <footer class=""> <!-- post actions --> <div class=""> <ul class="list-group list-group-horizontal"> <li class="list-group-item flex-fill text-center p-0 px-lg-2 border border-0"> <a class="small text-decoration-none" href="#"> <i class="far fa-thumbs-up"></i> 20 Like </a> </li> <li class="list-group-item flex-fill text-center p-0 px-lg-2 border border-right-0 border-top-0 border-bottom-0"> <a class="small text-decoration-none" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample"> <i class="fas fa-comment-alt"></i> 40 Comment </a> </li> <li class="list-group-item flex-fill text-center p-0 px-lg-2 border border-right-0 border-top-0 border-bottom-0 "> <a class="small text-decoration-none" href="#"> <i class="fas fa-share"></i> 90 Share </a> </li> </ul> </div> <!-- collapsed comments begins --> <div class="collapse" id="collapseExample"> <div class="card border border-right-0 border-left-0 border-bottom-0 mt-1"> <!-- new comment form --> <section class="mt-3"> <form action=""> <div class="input-group input-group"> <input type="text" class="form-control" placeholder="Write Comment" aria-label="Recipient's username" aria-describedby="basic-addon2"> <div class="input-group-append"> <a class="text-decoration-none text-white btn btn-primary" href="#" role="button">Comment</a> </div> </div> </form> </section> <!-- comment card bgins --> <section> <div class="card p-2 mt-3"> <!-- comment header --> <div class="d-flex"> <div class=""> <a class="text-decoration-none" href="#"> <img class="profile-pic" src="https://cdn3.iconfinder.com/data/icons/avatars-round-flat/33/avat-01-512.png" width="40" height="40" alt="..."> </a> </div> <div class="flex-grow-1 pl-2"> <a class="text-decoration-none text-capitalize h6 m-0" href="#">Tarzan</a> <p class="small m-0 text-muted">27 mins ago</p> </div> <div > <div class="dropdown"> <a class="" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="fas fa-chevron-down"></i> </a> <div class="dropdown-menu" aria-labelledby="dropdownMenuLink"> <a class="dropdown-item text-primary" href="#">Edit</a> <a class="dropdown-item text-primary" href="#">Delete</a> </div> </div> </div> </div> <!-- comment header --> <!-- comment body --> <div class="card-body p-0"> <p class="card-text h7 mb-1">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a class="card-link small" href="#"> <i class="far fa-thumbs-up"></i> 20 Like </a> </div> </div> </section> <!-- comment card ends --> </div> </div> <!-- collapsed comments ends --> </footer> <!-- post footer ends --> </div> </section> <!-- Post Ends --> </div> <div class="col-3"> <div class="card"> <div class="card-body p-3"> <h5 class="card-title m-0">Friends</h5> <div class="list-group list-group-flush"> <a href="#" class="list-group-item list-group-item-action text-primary"> Justo moto pani </a> <a href="#" class="list-group-item list-group-item-action text-primary">Harry consectetur</a> <a href="#" class="list-group-item list-group-item-action text-primary">Dobi leo risus</a> <a href="#" class="list-group-item list-group-item-action text-primary">Gadot facilisis in</a> <a href="#" class="btn btn-sm btn-primary">View All</a> </div> </div> </div> <div class="card mt-4"> <div class="card-body p-3"> <h5 class="card-title m-0">Users</h5> <div class="list-group list-group-flush"> <a href="#" class="list-group-item list-group-item-action text-primary"> Cras justo odio </a> <a href="#" class="list-group-item list-group-item-action text-primary">Dapibus ac facilisis in</a> <a href="#" class="list-group-item list-group-item-action text-primary">Morbi leo risus</a> <a href="#" class="list-group-item list-group-item-action text-primary">Porta ac consectetur ac</a> <a href="#" class="btn btn-sm btn-primary">View All</a> </div> </div> </div> </div> </div> </div> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> </body> </html>
.h7 { font-size: 0.9rem; }

Related: See More

Material Dashboard Angular
Bootstrap 4 Social Network Post - TheMashaBrand
social network layout - bootstrap 4
Bootstrap Social Card

Questions / Comments: