Bootstrap snippet: Simple Comment panel

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: panel,user list,comment



<div class="row bootstrap snippets"> <div class="col-md-6 col-md-offset-2 col-sm-12"> <div class="comment-wrapper"> <div class="panel panel-info"> <div class="panel-heading"> Comment panel </div> <div class="panel-body"> <textarea class="form-control" placeholder="write a comment..." rows="3"></textarea> <br> <button type="button" class="btn btn-info pull-right">Post</button> <div class="clearfix"></div> <hr> <ul class="media-list"> <li class="media"> <a href="#" class="pull-left"> <img src="http://bootdey.com/img/Content/user_1.jpg" alt="" class="img-circle"> </a> <div class="media-body"> <span class="text-muted pull-right"> <small class="text-muted">30 min ago</small> </span> <strong class="text-success">@MartinoMont</strong> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, <a href="#">#consecteturadipiscing </a>. </p> </div> </li> <li class="media"> <a href="#" class="pull-left"> <img src="http://bootdey.com/img/Content/user_2.jpg" alt="" class="img-circle"> </a> <div class="media-body"> <span class="text-muted pull-right"> <small class="text-muted">30 min ago</small> </span> <strong class="text-success">@LaurenceCorreil</strong> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor <a href="#">#ipsumdolor </a>adipiscing elit. </p> </div> </li> <li class="media"> <a href="#" class="pull-left"> <img src="http://bootdey.com/img/Content/user_3.jpg" alt="" class="img-circle"> </a> <div class="media-body"> <span class="text-muted pull-right"> <small class="text-muted">30 min ago</small> </span> <strong class="text-success">@JohnNida</strong> <p> Lorem ipsum dolor <a href="#">#sitamet</a> sit amet, consectetur adipiscing elit. </p> </div> </li> </ul> </div> </div> </div> </div> </div>
body{margin-top:20px;} .comment-wrapper .panel-body { max-height:650px; overflow:auto; } .comment-wrapper .media-list .media img { width:64px; height:64px; border:2px solid #e5e7e8; } .comment-wrapper .media-list .media { border-bottom:1px dashed #efefef; margin-bottom:25px; }
Dey-Dey

Simple Comment panel

Dey-Dey
  Dec 29th 2015, 09:44
1.7K Views