Hey there! This section was updated recently. If you're looking for 4.2.0 docs please visit this site

Bootstrap blog

MDB provides you dedicated components for your blog like comment sections, including avatars and various version of reply forms.

Author Box Premium component

About author


John Doe

Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint esse nulla quia quam veniam commodi dicta, iusto inventore. Voluptatum pariatur eveniet ea, officiis vitae praesentium beatae quas libero, esse facere.


<!--Author box-->
<div class="author-box">
    <!--Name-->
    <h3 class="h3-responsive text-center">About author</h3>
    <hr>
    <div class="row">
        <!--Avatar-->
        <div class="col-12 col-sm-2">
            <img src="http://mdbootstrap.com/img/Photos/Avatars/img%20(3).jpg" class="img-fluid rounded-circle z-depth-2">
        </div>
        <!--Author Data-->
        <div class=" col-12 col-sm-10">
            <p><strong>John Doe</strong></p>
            <div class="personal-sm">
                <a class="email-ic"><i class="fa fa-home"> </i></a>
                <a class="fb-ic"><i class="fa fa-facebook"> </i></a>
                <a class="tw-ic"><i class="fa fa-twitter"> </i></a>
                <a class="gplus-ic"><i class="fa fa-google-plus"> </i></a>
                <a class="li-ic"><i class="fa fa-linkedin"> </i></a>
                <a class="email-ic"><i class="fa fa-envelope-o"> </i></a>
            </div>
            <p>Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.</p>
            <p class="hidden-md-down">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint esse nulla quia quam veniam commodi dicta, iusto inventore. Voluptatum pariatur eveniet ea, officiis vitae praesentium beatae quas libero, esse facere.
            </p>
        </div>
    </div>
</div>
<!--/.Author box-->

Comments List Premium component

Comments 3

John Doe

  • 05/10/2015

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.

Marta Tev

  • 08/10/2015

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur.

Anna Maria

  • 17/10/2015

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia.


<!--Main wrapper-->
<div class="comments-list text-left">
    <div class="section-heading">
        <h3>Comments <span class="badge blue">3</span></h3>
    </div>
    <!--First row-->
    <div class="row">
        <!--Image column-->
        <div class="col-sm-2 col-12">
            <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-1.jpg">
        </div>
        <!--/.Image column-->
        <!--Content column-->
        <div class="col-sm-10 col-12">
            <a><h3 class="user-name">John Doe</h3></a>
            <div class="card-data">
                <ul>
                    <li class="comment-date"><i class="fa fa-clock-o"></i> 05/10/2015</li>
                </ul>
            </div>
            <p class="comment-text">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
        </div>
        <!--/.Content column-->
    </div>
    <!--/.First row-->
    <!--Second row-->
    <div class="row">
        <!--Image column-->
        <div class="col-sm-2 col-12">
            <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-2.jpg">
        </div>
        <!--/.Image column-->
        <!--Content column-->
        <div class="col-sm-10 col-12">
            <a><h3 class="user-name">Marta Tev</h3></a>
            <div class="card-data">
                <ul>
                    <li class="comment-date"><i class="fa fa-clock-o"></i> 08/10/2015</li>
                </ul>
            </div>
            <p class="comment-text">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur.</p>
        </div>
        <!--/.Content column-->
    </div>
    <!--/.Second row-->
    <!--Third row-->
    <div class="row">
        <!--Image column-->
        <div class="col-sm-2 col-12">
            <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-5.jpg">
        </div>
        <!--/.Image column-->
        <!--Content column-->
        <div class="col-sm-10 col-12">
            <a><h3 class="user-name">Anna Maria</h3></a>
            <div class="card-data">
                <ul>
                    <li class="comment-date"><i class="fa fa-clock-o"></i> 17/10/2015</li>
                </ul>
            </div>
            <p class="comment-text">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia.
            </p>
        </div>
        <!--/.Content column-->
    </div>
    <!--/.Third row-->
</div>
<!--/.Main wrapper-->

Reply Form (logged in user) Premium component

Leave a reply

(Logged In User)

Sample avatar image

<!--Section: Leave a reply (Logged In User)-->
<section>

    <!--Leave a reply form-->
    <div class="reply-form">
        <h1 class="section-heading">Leave a reply </h1>
        <p class="text-center">(Logged In User)</p>

        <!--Third row-->
        <div class="row">
            <!--Image column-->
            <div class="col-sm-2 col-12">
                <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-6.jpg">
            </div>
            <!--/.Image column-->

            <!--Content column-->
            <div class="col-sm-10 col-12">
                <div class="md-form">
                    <textarea type="text" id="form8" class="md-textarea"></textarea>
                    <label for="form8">Your message</label>
                </div>

            </div>

            <div class="text-center">
                <button class="btn btn-primary">Submit</button>
            </div>
            <!--/.Content column-->

        </div>
        <!--/.Third row-->
    </div>
    <!--/.Leave a reply form-->

</section>
<!--/Section: Leave a reply (Logged In User)-->

Reply Form (Not logged in user) Premium component

Leave a reply

(Not Logged In User)

Sign up with:

or:


<!--Section: Leave a reply (Not Logged In User)-->
<section>

    <!--Leave a reply form-->
    <div class="reply-form">
        <h1 class="section-heading">Leave a reply </h1>
        <p class="text-center">(Not Logged In User)</p>

        <h4>Sign up with: <span>
            <!--Facebook-->
        <a type="button" class="btn-floating btn-small btn-fb"><i class="fa fa-facebook"></i></a>
        <!--Twitter-->
        <a type="button" class="btn-floating btn-small btn-tw"><i class="fa fa-twitter"></i></a>
        <!--Google +-->
        <a type="button" class="btn-floating btn-small btn-gplus"><i class="fa fa-google-plus"></i></a>

        </span> <br><br>or:</h4>

        <div class="md-form">
            <i class="fa fa-user prefix"></i>
            <input type="text" id="form22" class="form-control">
            <label for="form22">Your name</label>
        </div>

        <div class="md-form">
            <i class="fa fa-envelope prefix"></i>
            <input type="text" id="form32" class="form-control">
            <label for="form32">Your email</label>
        </div>

        <div class="md-form">
            <i class="fa fa-home prefix"></i>
            <input type="text" id="form33" class="form-control">
            <label for="form33">Your website</label>
        </div>

        <div class="md-form">
            <i class="fa fa-pencil prefix"></i>
            <textarea type="text" id="form18" class="md-textarea"></textarea>
            <label for="form18">Your message</label>
        </div>

        <div class="text-center">
            <button class="btn btn-primary">Submit</button>
        </div>
    </div>
    <!--/.Leave a reply form-->

</section>
<!--/Section: Leave a reply (Not Logged In User)-->