Comments

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at ullamcorper mauris, vitae imperdiet tortor. Cras aliquet gravida lacus eu auctor

Ready Layout For Comments Section

A modular comment section that can be used for your blog, forum, Q/A site etc. Just keep the sections you want and use it.

Leave A Comment



Anne Brady

Posted On: 10 March, 2019 at 15:23 Hrs

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

Post a reply

John Doe

Posted On: 10 March, 2019 at 15:23 Hrs

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

Post a reply

Jane Smith

Posted On: 10 March, 2019 at 15:23 Hrs

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

Post a reply

Mark Manson

Posted On: 10 March, 2019 at 15:23 Hrs

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

Post a reply

Code Snippet To Achieve The Above Results
                                

<div class = "container wdpk-comments">
    <div class = "row">
        <div class = "col-lg-12">
            <h4>Leave A Comment</h4>
            <hr>
        </div>
        <div class = "col-lg-12">
            <form>
                <div class = "form-row wdpk-form">
                    <div class = "form-group col-md-6">
                        <div class = "form-row">
                            <div class = "form-group col-md-12">
                                <label for = "inputName">Name</label>
                                <input type = "text" class = "form-control" id = "inputName"
                                       placeholder = "Your Name">
                            </div>
                            <div class = "form-group col-md-12">
                                <label for = "inputEmail4">Email</label>
                                <input type = "email" class = "form-control" id = "inputEmail4"
                                       placeholder = "Email">
                            </div>
                            <div class = "form-group col-md-12">
                                <label for = "inputWebsite">Website</label>
                                <input type = "url" class = "form-control" id = "inputWebsite"
                                       placeholder = "http://yoursite.com">
                            </div>
                        </div>
                    </div>

                    <div class = "form-group col-md-6">
                        <div class = "form-group col-md-12">
                            <label for = "exampleFormControlTextarea1">Write Your Comment
                                                                       Here</label>
                            <textarea class = "form-control" id = "exampleFormControlTextarea1"
                                      rows = "9"></textarea>
                        </div>
                    </div>
                </div>
                <div class = "form-group">
                    <div class = "form-check wdpk-checkbox-wrapper">
                        <input class = "form-check-input wdpk-checkbox" type = "checkbox"
                               id = "gridCheck">
                        <label class = "form-check-label wdpk-checkbox-label" for = "gridCheck">
                            I agree to the privacy policy while I am posting this comment.
                        </label>
                        <span class = "wdpk-checkmark"></span>
                    </div>
                </div>
                <button type = "submit" class = "btn btn-outline-primary">Post A Comment</button>
            </form>
            <hr>
        </div>


        <div class = "col-lg-12 wdpk-comments-section">

            <div class = "row wdpk-comment-primary">
                <div class = "col-lg-2 wdpk-comment-profile"><img
                            src = "/assets/images/product.jpg"></div>
                <div class = "col-lg-10 wdpk-comment-text">
                    <h6 class = "wdpk-comment-title">Anne Brady</h6>
                    <p class = "wdpk-comment-date">Posted On: 10 March, 2019 at 15:23 Hrs</p>
                    <p class = "wdpk-comment-text">
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
                        ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis
                        parturient montes.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                        Aenean commodo ligula eget dolor.</p>
                    <a class = "wdpk-comment-reply-link" href = "#"><i
                                class = "fas fa fa-reply"></i> Post a reply </a>

                </div>
            </div>
            <hr>

            <div class = "row">
                <div class = "col-lg-11 offset-lg-1">

                    <!--Nested Reply 1 -->

                    <div class = "row wdpk-comment-reply">
                        <div class = "col-lg-2 wdpk-comment-profile"><img
                                    src = "/assets/images/product.jpg"></div>
                        <div class = "col-lg-10 wdpk-comment-text">
                            <h6 class = "wdpk-comment-title">John Doe</h6>
                            <p class = "wdpk-comment-date">Posted On: 10 March, 2019 at 15:23
                                                           Hrs</p>
                            <p class = "wdpk-comment-text">
                                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
                                commodo
                                ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et
                                magnis dis
                                parturient montes.Lorem ipsum dolor sit amet, consectetuer
                                adipiscing elit.
                                Aenean commodo ligula eget dolor.</p>
                            <a class = "wdpk-comment-reply-link" href = "#"><i
                                        class = "fas fa fa-reply"></i> Post a reply </a>
                        </div>
                    </div>
                    <hr>
                    <!-- /Nested Reply 1 -->


                    <div class = "row">
                        <div class = "col-lg-11 offset-lg-1">


                            <!--Nested Reply 2 -->
                            <div class = "row wdpk-comment-reply">
                                <div class = "col-lg-2 wdpk-comment-profile"><img
                                            src = "/assets/images/product.jpg"></div>
                                <div class = "col-lg-10 wdpk-comment-text">
                                    <h6 class = "wdpk-comment-title">Jane Smith</h6>
                                    <p class = "wdpk-comment-date">Posted On: 10 March, 2019 at
                                                                   15:23 Hrs</p>
                                    <p class = "wdpk-comment-text">
                                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                                        Aenean commodo
                                        ligula eget dolor. Aenean massa. Cum sociis natoque
                                        penatibus et magnis dis
                                        parturient montes.Lorem ipsum dolor sit amet, consectetuer
                                        adipiscing elit.
                                        Aenean commodo ligula eget dolor.</p>
                                    <a class = "wdpk-comment-reply-link" href = "#"><i
                                                class = "fas fa fa-reply"></i> Post a reply </a>
                                </div>
                            </div>
                            <!-- /Nested Reply 2 -->
                            <hr>
                        </div>
                    </div>

                </div>
            </div>
        </div>

        <!-- Second Comment Section -->
        <div class = "col-lg-12 wdpk-comments-section">

            <div class = "row wdpk-comment-primary">
                <div class = "col-lg-2 wdpk-comment-profile"><img
                            src = "/assets/images/product.jpg"></div>
                <div class = "col-lg-10 wdpk-comment-text">
                    <h6 class = "wdpk-comment-title">Mark Manson</h6>
                    <p class = "wdpk-comment-date">Posted On: 10 March, 2019 at 15:23 Hrs</p>
                    <p class = "wdpk-comment-text">
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
                        ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis
                        parturient montes.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                        Aenean commodo ligula eget dolor.</p>
                    <a class = "wdpk-comment-reply-link" href = "#"><i
                                class = "fas fa fa-reply"></i> Post a reply </a>

                </div>
            </div>
            <hr>
        </div>
        <!-- /Second Comment Section -->

    </div>
</div>


                                
                            
                        

/* No Changes Made To Default Variables */

                        
                    
                        
/* No Changes Made To Default Javascript */