Now we are giving you web page comment box section design demo. in this comment box design also display add comment input textbox. when you hover on comment display comment added time and comment likes. it's a fully responsive design. and also support all the browser.

We allows to free snippets of web design comments section , you can download full code of comment box design for website layout. Here in this post i will give you example of bootstrap 4 comment box snippet and you will get simple code of html, css and jquery. In bootstrap add comment snippet i give you three tab with html, css and js, you can easily get code of bootstrap comment section template layout.


<!doctype html> <html lang="en"> <head> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="custom.css"> </head> <body> <div class="container"> <div class="row mt-5"> <div class="col-md-6 offset-md-3 col-sm-6 offset-sm-3 col-12 comments-main pt-4 rounded"> <ul class="p-0"> <li> <div class="row comments mb-2"> <div class="col-md-2 col-sm-2 col-3 text-center user-img"> <img id="profile-photo" src="http://nicesnippets.com/demo/man01.png" class="rounded-circle" /> </div> <div class="col-md-9 col-sm-9 col-9 comment rounded mb-2"> <h4 class="m-0"><a href="#">Jacks David</a></h4> <time class="text-white ml-3">1 hours ago</time> <like></like> <p class="mb-0 text-white">Thank you for visiting all the way from New York.</p> </div> </div> </li> <ul class="p-0"> <li> <div class="row comments mb-2"> <div class="col-md-2 offset-md-2 col-sm-2 offset-sm-2 col-3 offset-1 text-center user-img"> <img id="profile-photo" src="http://nicesnippets.com/demo/man02.png" class="rounded-circle" /> </div> <div class="col-md-7 col-sm-7 col-8 comment rounded mb-2"> <h4 class="m-0"><a href="#">Steve Alex</a></h4> <time class="text-white ml-3">1 week ago</time> <like></like> <p class="mb-0 text-white">Thank you for visiting all the way from NYC.</p> </div> </div> </li> </ul> </ul> <ul class="p-0"> <li> <div class="row comments mb-2"> <div class="col-md-2 col-sm-2 col-3 text-center user-img"> <img id="profile-photo" src="http://nicesnippets.com/demo/man03.png" class="rounded-circle" /> </div> <div class="col-md-9 col-sm-9 col-9 comment rounded mb-2"> <h4 class="m-0"><a href="#">Andrew Filander</a></h4> <time class="text-white ml-3">7 day ago</time> <like></like> <p class="mb-0 text-white">Thank you for visiting all the way from New York.</p> </div> </div> </li> <ul class="p-0"> <li> <div class="row comments mb-2"> <div class="col-md-2 offset-md-2 col-sm-2 offset-sm-2 col-3 offset-1 text-center user-img"> <img id="profile-photo" src="http://nicesnippets.com/demo/man04.png" class="rounded-circle" /> </div> <div class="col-md-7 col-sm-7 col-8 comment rounded mb-2"> <h4 class="m-0"><a href="#">james Cordon</a></h4> <time class="text-white ml-3">1 min ago</time> <like></like> <p class="mb-0 text-white">Thank you for visiting from an unknown location.</p> </div> </div> </li> </ul> </ul> <ul class="p-0"> <li> <div class="row comments mb-2"> <div class="col-md-2 col-sm-2 col-3 text-center user-img"> <img id="profile-photo" src="http://nicesnippets.com/demo/man01.png" class="rounded-circle" /> </div> <div class="col-md-9 col-sm-9 col-9 comment rounded mb-2"> <h4 class="m-0"><a href="#">Tye Simmon</a></h4> <time class="text-white ml-3">1 month ago</time> <like></like> <p class="mb-0 text-white">Thank you for visiting all the way from New York.</p> </div> </div> </li> </ul> <div class="row comment-box-main p-3 rounded-bottom"> <div class="col-md-9 col-sm-9 col-9 pr-0 comment-box"> <input type="text" class="form-control" placeholder="comment ...." /> </div> <div class="col-md-3 col-sm-2 col-2 pl-0 text-center send-btn"> <button class="btn btn-info">Send</button> </div> </div> </div> </div> </div> </body> <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.14/vue.min.js'></script> </html>
body{ font-family: 'Raleway', sans-serif; background: #E9ECE9; } .comments-main{ background: #FFF; } .comment time, .comment:hover time,.icon-rocknroll, .like-count { -webkit-transition: .25s opacity linear; transition: .25s opacity linear; } .comments-main ul li{ list-style: none; } .comments .comment { padding: 5px 10px; background: #00AF90; } .comments .comment:hover time{ opacity: 1; } .comments .user-img img { width: 50px; height: 50px; } .comments .comment h4 { display: inline-block; font-size: 16px; } .comments .comment h4 a { color: #404040; text-decoration: none; } .comments .comment .icon-rocknroll { color: #545454; font-size: .85rem; } .comments .comment .icon-rocknroll:hover { opacity: .5; } .comments .comment time,.comments .comment .like-count,.comments .comment .icon-rocknroll { font-size: .75rem; opacity: 0; } .comments .comment time, .comments .comment .like-count { font-weight: 300; } .comments .comment p { font-size: 13px; } .comments .comment p .reply { color: #BFBFA8; cursor: pointer; } .comments .comment .active { opacity: 1; } .icon-rocknroll { background: none; outline: none; cursor: pointer; margin: 0 .125rem 0 0; } .comments .comment:hover .icon-rocknroll,.comments .comment:hover .like-count { opacity: 1; } .comment-box-main{ background: #CA1D5F; } @media (min-width: 320px) and (max-width: 480px){ .comments .comment h4 { font-size: 12px; } .comments .comment p{ font-size: 11px; } .comment-box-main .send-btn button{ margin-left: 5px; } }
Vue.component('like', { template: "<div class='like-data float-right text-white'><button class='icon-rocknroll mr-1 p-0 border-0' v-class='active: liked' v-on='click: toggleLike'><i class='fa fa-thumbs-up text-white' aria-hidden='true'></i></button><span class='like-count' v-class='active: liked'>{{ likesCount }}</span></div>", data: function() { return { liked: false, likesCount: 0 } }, methods: { toggleLike: function() { this.liked = !this.liked; this.liked ? this.likesCount++ : this.likesCount--; } } }); new Vue({ el: '.comments-main', });

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





Random Post