Get comment box design code free. In this comment design we are display comment design and comment replay design. and add comment text box. comment and comment replay design we are dislpay like dislike and comment add time.

you can get code of bootstrap comment box example snippet. we give you example of bootstrap 4 comment box , you can simple copy bellow code and use in your project. If it free snippets of bootstrap add comment So you have to simple get those bellow code from tab of html, css and js. you simple click on HTML Code then you will get html code bootstrap comment section template snippets, click on JS Code tab get code of jquery codd for bootstrap comment reply snippets, same as for CSS Code tab. It's pretty easy and simple example of bootstrap comments example snippet.


<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> </head> <body> <div class="container"> <div class="row"> <div class="col-lg-5 offset-lg-4 col-12 comment-main rounded"> <ul class="p-0"> <li> <div class="row comment-box p-1 pt-3 pr-4"> <div class="col-lg-2 col-3 user-img text-center"> <img src="/demo/man-profile.jpg" class="main-cmt-img"> </div> <div class="col-lg-10 col-9 user-comment bg-light rounded pb-1"> <div class="row"> <div class="col-lg-8 col-6 border-bottom pr-0"> <p class="w-100 p-2 m-0">Lorem ipsum dolor sit amet.</p> </div> <div class="col-lg-4 col-6 border-bottom"> <p class="w-100 p-2 m-0"><span class="float-right"><i class="fa fa-clock-o mr-1" aria-hidden="true"></i>01 : 00</span></p> </div> </div> <div class="user-comment-desc p-1 pl-2"> <p class="m-0 mr-2"><span><i class="fa fa-thumbs-up mr-1" aria-hidden="true"></i></span></i>490</p> <p class="m-0 mr-2"><span><i class="fa fa-thumbs-down mr-1" aria-hidden="true"></i></span></i>450</p> </div> </div> </div> <div class="row"> <div class="col-lg-11 offset-lg-1"> <ul class="p-0"> <li> <div class="row comment-box p-1 pt-2 pr-4"> <div class="col-lg-3 col-3 user-img"> <img src="/demo/man-profile.jpg" class="p-2 float-right sub-cmt-img"> </div> <div class="col-lg-9 col-9 user-comment bg-light rounded pb-1 mt-2"> <div class="row"> <div class="col-lg-7 col-6 border-bottom pr-0"> <p class="w-100 p-2 m-0">Lorem ipsum dolor sit amet.</p> </div> <div class="col-lg-5 col-6 border-bottom"> <p class="w-100 p-2 m-0"><span class="float-right"><i class="fa fa-clock-o mr-1" aria-hidden="true"></i>01 : 00</span></p> </div> </div> <div class="user-comment-desc p-1 pl-2"> <p class="m-0 mr-2"><span><i class="fa fa-thumbs-up mr-1" aria-hidden="true"></i></span></i>510</p> <p class="m-0 mr-2"><span><i class="fa fa-thumbs-down mr-1" aria-hidden="true"></i></span></i>690</p> </div> </div> </div> </li> </ul> </div> </div> <div class="row"> <div class="col-lg-11 offset-lg-1"> <ul class="p-0"> <li> <div class="row comment-box p-1 pt-2 pr-4"> <div class="col-lg-3 col-3 user-img"> <img src="/demo/man-profile.jpg" class="p-2 float-right sub-cmt-img"> </div> <div class="col-lg-9 col-9 user-comment bg-light rounded pb-1 mt-2"> <div class="row"> <div class="col-lg-7 col-6 border-bottom pr-0"> <p class="w-100 p-2 m-0">Lorem ipsum dolor sit amet.</p> </div> <div class="col-lg-5 col-6 border-bottom"> <p class="w-100 p-2 m-0"><span class="float-right"><i class="fa fa-clock-o mr-1" aria-hidden="true"></i>01 : 00</span></p> </div> </div> <div class="user-comment-desc p-1 pl-2"> <p class="m-0 mr-2"><span><i class="fa fa-thumbs-up mr-1" aria-hidden="true"></i></span></i>120</p> <p class="m-0 mr-2"><span><i class="fa fa-thumbs-down mr-1" aria-hidden="true"></i></span></i>960</p> </div> </div> </div> </li> </ul> </div> </div> </li> <li> <div class="row comment-box p-1 pt-3 pr-4"> <div class="col-lg-2 col-3 user-img text-center"> <img src="/demo/man-profile.jpg" class="main-cmt-img"> </div> <div class="col-lg-10 col-9 user-comment bg-light rounded pb-1"> <div class="row"> <div class="col-lg-8 col-6 border-bottom pr-0"> <p class="w-100 p-2 m-0">Lorem ipsum dolor sit amet.</p> </div> <div class="col-lg-4 col-6 border-bottom"> <p class="w-100 p-2 m-0"><span class="float-right"><i class="fa fa-clock-o mr-1" aria-hidden="true"></i>01 : 00</span></p> </div> </div> <div class="user-comment-desc p-1 pl-2"> <p class="m-0 mr-2"><span><i class="fa fa-thumbs-up mr-1" aria-hidden="true"></i></span></i>109</p> <p class="m-0 mr-2"><span><i class="fa fa-thumbs-down mr-1" aria-hidden="true"></i></span></i>512</p> </div> </div> </div> </li> <hr> <div class="row"> <div class="col-lg-10 col-10"> <input type="text" class="form-control" placeholder="write comments ..."> </div> <div class="col-lg-2 col-2 send-icon"> <a href="http://nicesnippets.com/" target="_blank"><i class="fa fa-paper-plane" aria-hidden="true"></i></a> </div> </div> </ul> </div> </div> </body> </html>
body{ margin-top: 50px; background-color: #0191C8; } .comment-main{ background-color: #74C2E1; box-shadow: 1px 2px 6px 2px #005B9A; } .comment-main ul{ list-style: none; } .sub-cmt-img{ width: 55px !important; height: 55px !important; border-radius: 50%; } .main-cmt-img{ width: 40px !important; height: 40px !important; border-radius: 50%; } .border-bottom{ font-size: 13px; border-bottom: 1px solid #d3d3d3; } .user-comment{ background-color: #f3f3f3 !important; box-shadow: 0px 5px 8px -4px #c1c1c1; } .user-comment-desc, .user-comment span{ color: #a0a0a0; } .user-comment-desc p{ font-size: 12px; display: inline-block; float: left; } .send-icon i{ font-size: 20px; background: #f3f3f3; padding: 6px 5px; border-radius: 50%; color: #74C2E1; height: 35px; width: 35px; } .user-comment:before{ content: ""; height: 0; width: 0; top: 0; left: -10px; position: absolute; border-style: solid; border-width: 13px 0 0 13px; border-color: #f3f3f3 transparent transparent transparent; }

Please Subscribe Your Email Address, We Will Notify You When Add New Snippet:





Random Post