I am building a website using Laravel and for front-end, I am using bootstrap. I have a blog page where I want Comment/Reply system. Now, I have done everything but I can't make the dynamic tree-like layout for Comment/Reply. For now, I am using static layout and this is my HTML:
Please run this code snippets on jsfiddle to see the design. I want to make it dynamic so that whenever I put the comment or reply, it should adjust itself in the above layout accordingly. Whenever I click Reply Button, I want to show a form for reply just below the clicked button. Thanks in advance.
.comments-area {
background: #f1f9ff;
padding: 50px 30px;
margin-top: 50px;
}
@media (max-width: 414px) {
.comments-area {
padding: 50px 8px;
}
}
.comments-area h4 {
text-align: center;
margin-bottom: 50px;
color: #002347;
font-size: 18px;
}
.comments-area h5 {
font-size: 16px;
margin-bottom: 0px;
}
.comments-area a {
color: #002347;
}
.comments-area .comment-list {
padding-bottom: 30px;
}
.comments-area .comment-list:last-child {
padding-bottom: 0px;
}
.comments-area .comment-list.left-padding {
padding-left: 25px;
}
@media (max-width: 413px) {
.comments-area .comment-list .single-comment h5 {
font-size: 12px;
}
.comments-area .comment-list .single-comment .date {
font-size: 11px;
}
.comments-area .comment-list .single-comment .comment {
font-size: 10px;
}
}
.comments-area .thumb {
margin-right: 20px;
}
.comments-area .date {
font-size: 13px;
color: #777777;
margin-bottom: 13px;
}
.comments-area .comment {
color: #777777;
margin-bottom: 0px;
}
.comments-area .btn-reply {
background-color: #fff;
color: #002347;
border: 1px solid #eee;
padding: 2px 18px;
font-size: 12px;
display: block;
font-weight: 600;
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
}
.comments-area .btn-reply:hover {
background: #fdc632;
color: #002347;
}
.comment-form {
background: #f1f9ff;
text-align: center;
padding: 47px 30px 43px;
margin-top: 50px;
margin-bottom: 40px;
}
.comment-form h4 {
text-align: center;
margin-bottom: 50px;
font-size: 18px;
line-height: 22px;
color: #002347;
}
.comment-form .name {
padding-left: 0px;
}
@media (max-width: 767px) {
.comment-form .name {
padding-right: 0px;
margin-bottom: 1rem;
}
}
.comment-form .email {
padding-right: 0px;
}
@media (max-width: 991px) {
.comment-form .email {
padding-left: 0px;
}
}
.comment-form .form-control {
padding: 8px 20px;
background: #fff;
border: none;
border-radius: 0px;
width: 100%;
font-size: 14px;
color: #777777;
border: 1px solid transparent;
}
.comment-form .form-control:focus {
box-shadow: none;
border: 1px solid #eee;
}
.comment-form textarea.form-control {
height: 140px;
resize: none;
}
.comment-form ::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
font-size: 15px;
color: #777;
}
.comment-form ::-moz-placeholder {
/* Firefox 19+ */
font-size: 15px;
color: #777;
}
.comment-form :-ms-input-placeholder {
/* IE 10+ */
font-size: 15px;
color: #777;
}
.comment-form :-moz-placeholder {
/* Firefox 18- */
font-size: 15px;
color: #777;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
<script src="https://use.fontawesome.com/9da9b46707.js"></script>
<div class="row">
<div class="col-lg-12">
<div class="comments-area">
<h4>03 Comments</h4>
<div class="comment-list">
<div class="single-comment justify-content-between d-flex">
<div class="user justify-content-between d-flex">
<div class="thumb">
<i class="fa fa-user" style="font-size:30px; width:30px;"></i>
</div>
<div class="desc">
<h5>Emilly Blunt</h5>
<p class="date">December 4, 2017 at 3:12 pm </p>
<p class="comment">
Never say goodbye till the end comes!
</p>
</div>
</div>
<div class="reply-btn">
<a href="" class="btn-reply text-uppercase">reply</a>
</div>
</div>
</div>
<div class="comment-list left-padding">
<div class="single-comment justify-content-between d-flex">
<div class="user justify-content-between d-flex">
<div class="thumb">
<i class="fa fa-user" style="font-size:30px; width:30px;"></i>
</div>
<div class="desc">
<h5>Elsie Cunningham</h5>
<p class="date">December 4, 2017 at 3:12 pm </p>
<p class="comment">
I am Reply of above comment.
</p>
</div>
</div>
<div class="reply-btn">
<a href="" class="btn-reply text-uppercase">reply</a>
</div>
</div>
</div>
<div id="divider-transparent"></div>
<div class="comment-list">
<div class="single-comment justify-content-between d-flex">
<div class="user justify-content-between d-flex">
<div class="thumb">
<i class="fa fa-user" style="font-size:30px; width:30px;"></i>
</div>
<div class="desc">
<h5>Ina Hayes</h5>
<p class="date">December 4, 2017 at 3:12 pm </p>
<p class="comment">
Never say goodbye till the end comes!
</p>
</div>
</div>
<div class="reply-btn">
<a href="" class="btn-reply text-uppercase">reply</a>
</div>
</div>
</div>
</div>
<div class="comment-form">
<h4>Leave a Comment/Reply</h4>
<form action="#">
<div class="row">
<div class="offset-lg-2 col-lg-4 col-md-4 col-sm-5">
<input type="text" class="form-control" placeholder="Full Name *" />
</div>
<div class="col-lg-4 col-md-4 col-sm-5">
<input type="text" class="form-control" placeholder="Email *" />
</div>
</div><br />
<div class="row">
<div class="offset-lg-2 col-lg-8 col-md-8 col-sm-10">
<textarea rows="5" class="form-control" placeholder="Comment"></textarea>
</div>
</div><br />
<div class="form-group" style="text-align: center;">
<input type="submit" value="Submit" class="btn btn-primary py-3 px-5 submit-comment">
</div>
</form>
</div>
</div>
</div>