how show the comments like parent comments and child comments

Question

I have one comment form:

if user enter the comment means I want insert the value if user clicks reply button means I want show that form near parent comment while displaying like sub comment

Now i have only html form. I want to obtain something like this

My HTML Form

 <div class="post-block post-comments clearfix" style="margin:10px"> <h3 class="heading-primary comments"><i class="fa fa-comments"></i>Comments (10)</h3> <form method="POST" id="commentForm" novalidate="novalidate"> <div class="row"> <div class="form-group"> <div class="col-md-6"> <label>Your name *</label> <input type="text" required="" id="name" name="name" class="form-control" maxlength="100" data-msg-required="Please enter your name." value="" aria-required="true"> </div> <div class="col-md-6"> <label>Your email address </label> <input type="email" id="email" name="email" class="form-control" maxlength="100" data-msg-email="Please enter a valid email address." data-msg-required="Please enter your email address." value="" aria-required="true"> </div> </div> </div> <div class="row"> <div class="form-group"> <div class="col-md-12"> <label>Comment *</label> <textarea required="" id="message" name="message" class="form-control" rows="5" data-msg-required="Please enter your comment." maxlength="5000" aria-required="true" placeholder="Enter comment here"></textarea> </div> </div> </div> <div class="row" style="margin-top:10px"> <div class="col-md-12"> <input type="submit" data-loading-text="Loading..." class="btn btn-primary btn-lg mb-xlg" id="post-comment" value="Post Comment"> </div> </div> </form> <ul class="comments"> <li> <div class="comment"> <div class="img-thumbnail"> <img class="avatar" alt="" src="../TV/dist/img/user2-160x160.jpg"> </div> <div class="comment-block"> <div class="comment-arrow"></div> <span class="comment-by"> <strong>Kani</strong> <span class="pull-right"> <span> <a href="#"><i class="fa fa-reply"></i> Reply</a></span> </span> </span> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae, gravida pellentesque urna varius vitae. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae. Sed dui lorem, adipiscing in adipiscing et, interdum nec metus. Mauris ultricies, justo eu convallis placerat, felis enim ornare nisi, vitae mattis nulla ante id dui.</p> <span class="date pull-right">January 12, 2013 at 1:38 pm</span> </div> </div> <ul class="comments reply"> <li> <div class="comment"> <div class="img-thumbnail"> <img class="avatar" alt="" src="../TV/dist/img/user2-160x160.jpg"> </div> <div class="comment-block"> <div class="comment-arrow"></div> <span class="comment-by"> <strong>John Doe</strong> <span class="pull-right"> <span> <a href="#"><i class="fa fa-reply"></i> Reply</a></span> </span> </span> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae, gravida pellentesque urna varius vitae.</p> <span class="date pull-right">January 12, 2013 at 1:38 pm</span> </div> </div> </li> <li> <div class="comment"> <div class="img-thumbnail"> <img class="avatar" alt="" src="../TV/dist/img/user3-128x128.jpg"> </div> <div class="comment-block"> <div class="comment-arrow"></div> <span class="comment-by"> <strong>John Doe</strong> <span class="pull-right"> <span> <a href="#"><i class="fa fa-reply"></i> Reply</a></span> </span> </span> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae, gravida pellentesque urna varius vitae.</p> <span class="date pull-right">January 12, 2013 at 1:38 pm</span> </div> </div> </li> </ul> </li> <li> <div class="comment"> <div class="img-thumbnail"> <img class="avatar" alt="" src="../TV/dist/img/user3-128x128.jpg"> </div> <div class="comment-block"> <div class="comment-arrow"></div> <span class="comment-by"> <strong>Kani</strong> <span class="pull-right"> <span> <a href="#"><i class="fa fa-reply"></i> Reply</a></span> </span> </span> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <span class="date pull-right">January 12, 2013 at 1:38 pm</span> </div> </div> </li> <li> <div class="comment"> <div class="img-thumbnail"> <img class="avatar" alt="" src="../TV/dist/img/user2-160x160.jpg"> </div> <div class="comment-block"> <div class="comment-arrow"></div> <span class="comment-by"> <strong>Kani</strong> <span class="pull-right"> <span> <a href="#"><i class="fa fa-reply"></i> Reply</a></span> </span> </span> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <span class="date pull-right">January 12, 2013 at 1:38 pm</span> </div> </div> </li> </ul> </div> 

Answer 1

You can use this bootstrap elements.

http://getbootstrap.com/components/#media