Comments

Bootstrap 5 Comments component

Responsive Comment Box built with the Bootstrap 5. Comment with avatar, nested comments, comment with reply, comment section, comment template, unread comments, comment form & more.


Basic example

Type your note, and hit enter to add it

avatar

Martha

Upvote?

3

Type your note, and hit enter to add it

avatar

Johny

Upvote?

4

Type your note, and hit enter to add it

avatar

Mary Kate

Upvoted

2

Type your note, and hit enter to add it

avatar

Johny

Upvote?


          <div class="row d-flex justify-content-center">
            <div class="col-md-8 col-lg-6">
              <div class="card shadow-0 border" style="background-color: #f0f2f5;">
                <div class="card-body p-4">
                  <div class="form-outline mb-4">
                    <input
                      type="text"
                      id="addANote"
                      class="form-control"
                      placeholder="Type comment..."
                    />
                    <label class="form-label" for="addANote">+ Add a note</label>
                  </div>

                  <div class="card mb-4">
                    <div class="card-body">
                      <p>Type your note, and hit enter to add it</p>

                      <div class="d-flex justify-content-between">
                        <div class="d-flex flex-row align-items-center">
                          <img
                            src="https://mdbootstrap.com/img/Photos/Avatars/img%20(4).jpg"
                            alt="avatar"
                            width="25"
                            height="25"
                          />
                          <p class="small mb-0 ms-2">Martha</p>
                        </div>
                        <div class="d-flex flex-row align-items-center">
                          <p class="small text-muted mb-0">Upvote?</p>
                          <i
                            class="far fa-thumbs-up mx-2 fa-xs text-black"
                            style="margin-top: -0.16rem;"
                          ></i>
                          <p class="small text-muted mb-0">3</p>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="card mb-4">
                    <div class="card-body">
                      <p>Type your note, and hit enter to add it</p>

                      <div class="d-flex justify-content-between">
                        <div class="d-flex flex-row align-items-center">
                          <img
                            src="https://mdbootstrap.com/img/Photos/Avatars/img%20(32).jpg"
                            alt="avatar"
                            width="25"
                            height="25"
                          />
                          <p class="small mb-0 ms-2">Johny</p>
                        </div>
                        <div class="d-flex flex-row align-items-center">
                          <p class="small text-muted mb-0">Upvote?</p>
                          <i
                            class="far fa-thumbs-up mx-2 fa-xs text-black"
                            style="margin-top: -0.16rem;"
                          ></i>
                          <p class="small text-muted mb-0">4</p>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="card mb-4">
                    <div class="card-body">
                      <p>Type your note, and hit enter to add it</p>

                      <div class="d-flex justify-content-between">
                        <div class="d-flex flex-row align-items-center">
                          <img
                            src="https://mdbootstrap.com/img/Photos/Avatars/img%20(31).jpg"
                            alt="avatar"
                            width="25"
                            height="25"
                          />
                          <p class="small mb-0 ms-2">Mary Kate</p>
                        </div>
                        <div class="d-flex flex-row align-items-center text-primary">
                          <p class="small mb-0">Upvoted</p>
                          <i class="fas fa-thumbs-up mx-2 fa-xs" style="margin-top: -0.16rem;"></i>
                          <p class="small mb-0">2</p>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="card">
                    <div class="card-body">
                      <p>Type your note, and hit enter to add it</p>

                      <div class="d-flex justify-content-between">
                        <div class="d-flex flex-row align-items-center">
                          <img
                            src="https://mdbootstrap.com/img/Photos/Avatars/img%20(32).jpg"
                            alt="avatar"
                            width="25"
                            height="25"
                          />
                          <p class="small mb-0 ms-2">Johny</p>
                        </div>
                        <div class="d-flex flex-row align-items-center">
                          <p class="small text-muted mb-0">Upvote?</p>
                          <i
                            class="far fa-thumbs-up ms-2 fa-xs text-black"
                            style="margin-top: -0.16rem;"
                          ></i>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        

Nested comments

Nested comments section

avatar

Maria Smantha - 2 hours ago

reply

It is a long established fact that a reader will be distracted by the readable content of a page.

avatar

Simona Disa - 3 hours ago

letters, as opposed to using 'Content here, content here', making it look like readable English.

avatar

John Smith - 4 hours ago

the majority have suffered alteration in some form, by injected humour, or randomised words.

avatar

Natalie Smith - 2 hours ago

reply

The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33.

avatar

Lisa Cudrow - 4 hours ago

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

avatar

Maggie McLoan - 5 hours ago

a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur

avatar

John Smith - 6 hours ago

Autem, totam debitis suscipit saepe sapiente magnam officiis quaerat necessitatibus odio assumenda, perferendis quae iusto labore laboriosam minima numquam impedit quam dolorem!


          <section class="gradient-custom">
            <div class="container my-5 py-5">
              <div class="row d-flex justify-content-center">
                <div class="col-md-12 col-lg-10 col-xl-8">
                  <div class="card">
                    <div class="card-body p-4">
                      <h4 class="text-center mb-4 pb-2">Nested comments section</h4>

                      <div class="row">
                        <div class="col">
                          <div class="d-flex flex-start">
                            <img
                              class="rounded-circle shadow-1-strong me-3"
                              src="https://mdbootstrap.com/img/Photos/Avatars/img%20(10).jpg"
                              alt="avatar"
                              width="65"
                              height="65"
                            />
                            <div class="flex-grow-1 flex-shrink-1">
                              <div>
                                <div class="d-flex justify-content-between align-items-center">
                                  <p class="mb-1">
                                    Maria Smantha <span class="small">- 2 hours ago</span>
                                  </p>
                                  <a href="#!"
                                    ><i class="fas fa-reply fa-xs"></i
                                    ><span class="small"> reply</span></a
                                  >
                                </div>
                                <p class="small mb-0">
                                  It is a long established fact that a reader will be distracted by
                                  the readable content of a page.
                                </p>
                              </div>

                              <div class="d-flex flex-start mt-4">
                                <a class="me-3" href="#">
                                  <img
                                    class="rounded-circle shadow-1-strong"
                                    src="https://mdbootstrap.com/img/Photos/Avatars/img%20(11).jpg"
                                    alt="avatar"
                                    width="65"
                                    height="65"
                                  />
                                </a>
                                <div class="flex-grow-1 flex-shrink-1">
                                  <div>
                                    <div class="d-flex justify-content-between align-items-center">
                                      <p class="mb-1">
                                        Simona Disa <span class="small">- 3 hours ago</span>
                                      </p>
                                    </div>
                                    <p class="small mb-0">
                                      letters, as opposed to using 'Content here, content here',
                                      making it look like readable English.
                                    </p>
                                  </div>
                                </div>
                              </div>

                              <div class="d-flex flex-start mt-4">
                                <a class="me-3" href="#">
                                  <img
                                    class="rounded-circle shadow-1-strong"
                                    src="https://mdbootstrap.com/img/Photos/Avatars/img%20(32).jpg"
                                    alt="avatar"
                                    width="65"
                                    height="65"
                                  />
                                </a>
                                <div class="flex-grow-1 flex-shrink-1">
                                  <div>
                                    <div class="d-flex justify-content-between align-items-center">
                                      <p class="mb-1">
                                        John Smith <span class="small">- 4 hours ago</span>
                                      </p>
                                    </div>
                                    <p class="small mb-0">
                                      the majority have suffered alteration in some form, by
                                      injected humour, or randomised words.
                                    </p>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>

                          <div class="d-flex flex-start mt-4">
                            <img
                              class="rounded-circle shadow-1-strong me-3"
                              src="https://mdbootstrap.com/img/Photos/Avatars/img%20(12).jpg"
                              alt="avatar"
                              width="65"
                              height="65"
                            />
                            <div class="flex-grow-1 flex-shrink-1">
                              <div>
                                <div class="d-flex justify-content-between align-items-center">
                                  <p class="mb-1">
                                    Natalie Smith <span class="small">- 2 hours ago</span>
                                  </p>
                                  <a href="#!"
                                    ><i class="fas fa-reply fa-xs"></i
                                    ><span class="small"> reply</span></a
                                  >
                                </div>
                                <p class="small mb-0">
                                  The standard chunk of Lorem Ipsum used since the 1500s is
                                  reproduced below for those interested. Sections 1.10.32 and
                                  1.10.33.
                                </p>
                              </div>

                              <div class="d-flex flex-start mt-4">
                                <a class="me-3" href="#">
                                  <img
                                    class="rounded-circle shadow-1-strong"
                                    src="https://mdbootstrap.com/img/Photos/Avatars/img%20(31).jpg"
                                    alt="avatar"
                                    width="65"
                                    height="65"
                                  />
                                </a>
                                <div class="flex-grow-1 flex-shrink-1">
                                  <div>
                                    <div class="d-flex justify-content-between align-items-center">
                                      <p class="mb-1">
                                        Lisa Cudrow <span class="small">- 4 hours ago</span>
                                      </p>
                                    </div>
                                    <p class="small mb-0">
                                      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus
                                      scelerisque ante sollicitudin commodo. Cras purus odio,
                                      vestibulum in vulputate at, tempus viverra turpis.
                                    </p>
                                  </div>
                                </div>
                              </div>

                              <div class="d-flex flex-start mt-4">
                                <a class="me-3" href="#">
                                  <img
                                    class="rounded-circle shadow-1-strong"
                                    src="https://mdbootstrap.com/img/Photos/Avatars/img%20(29).jpg"
                                    alt="avatar"
                                    width="65"
                                    height="65"
                                  />
                                </a>
                                <div class="flex-grow-1 flex-shrink-1">
                                  <div>
                                    <div class="d-flex justify-content-between align-items-center">
                                      <p class="mb-1">
                                        Maggie McLoan <span class="small">- 5 hours ago</span>
                                      </p>
                                    </div>
                                    <p class="small mb-0">
                                      a Latin professor at Hampden-Sydney College in Virginia,
                                      looked up one of the more obscure Latin words, consectetur
                                    </p>
                                  </div>
                                </div>
                              </div>

                              <div class="d-flex flex-start mt-4">
                                <a class="me-3" href="#">
                                  <img
                                    class="rounded-circle shadow-1-strong"
                                    src="https://mdbootstrap.com/img/Photos/Avatars/img%20(32).jpg"
                                    alt="avatar"
                                    width="65"
                                    height="65"
                                  />
                                </a>
                                <div class="flex-grow-1 flex-shrink-1">
                                  <div>
                                    <div class="d-flex justify-content-between align-items-center">
                                      <p class="mb-1">
                                        John Smith <span class="small">- 6 hours ago</span>
                                      </p>
                                    </div>
                                    <p class="small mb-0">
                                      Autem, totam debitis suscipit saepe sapiente magnam officiis
                                      quaerat necessitatibus odio assumenda, perferendis quae iusto
                                      labore laboriosam minima numquam impedit quam dolorem!
                                    </p>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
        

          .gradient-custom { /* fallback for old browsers */ background: #4facfe; /* Chrome 10-25,
          Safari 5.1-6 */ background: -webkit-linear-gradient(to bottom right, rgba(79, 172, 254,
          1), rgba(0, 242, 254, 1)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+,
          Safari 7+ */ background: linear-gradient(to bottom right, rgba(79, 172, 254, 1), rgba(0,
          242, 254, 1)) }
        

Simple comment card

avatar
Lily Coleman

Shared publicly - Jan 2020

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip consequat.


          <section style="background-color: #eee;">
            <div class="container my-5 py-5">
              <div class="row d-flex justify-content-center">
                <div class="col-md-12 col-lg-10 col-xl-8">
                  <div class="card">
                    <div class="card-body">
                      <div class="d-flex flex-start align-items-center">
                        <img
                          class="rounded-circle shadow-1-strong me-3"
                          src="https://mdbootstrap.com/img/Photos/Avatars/img%20(19).jpg"
                          alt="avatar"
                          width="60"
                          height="60"
                        />
                        <div>
                          <h6 class="fw-bold text-primary mb-1">Lily Coleman</h6>
                          <p class="text-muted small mb-0">
                            Shared publicly - Jan 2020
                          </p>
                        </div>
                      </div>

                      <p class="mt-3 mb-4 pb-2">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                        quis nostrud exercitation ullamco laboris nisi ut aliquip consequat.
                      </p>

                      <div class="small d-flex justify-content-start">
                        <a href="#!" class="d-flex align-items-center me-3">
                          <i class="far fa-thumbs-up me-2"></i>
                          <p class="mb-0">Like</p>
                        </a>
                        <a href="#!" class="d-flex align-items-center me-3">
                          <i class="far fa-comment-dots me-2"></i>
                          <p class="mb-0">Comment</p>
                        </a>
                        <a href="#!" class="d-flex align-items-center me-3">
                          <i class="fas fa-share me-2"></i>
                          <p class="mb-0">Share</p>
                        </a>
                      </div>
                    </div>
                    <div class="card-footer py-3 border-0" style="background-color: #f8f9fa;">
                      <div class="d-flex flex-start w-100">
                        <img
                          class="rounded-circle shadow-1-strong me-3"
                          src="https://mdbootstrap.com/img/Photos/Avatars/img%20(19).jpg"
                          alt="avatar"
                          width="40"
                          height="40"
                        />
                        <div class="form-outline w-100">
                          <textarea
                            class="form-control"
                            id="textAreaExample"
                            rows="4"
                            style="background: #fff;"
                          ></textarea>
                          <label class="form-label" for="textAreaExample">Message</label>
                        </div>
                      </div>
                      <div class="float-end mt-2 pt-1">
                        <button type="button" class="btn btn-primary btn-sm">Post comment</button>
                        <button type="button" class="btn btn-outline-primary btn-sm">Cancel</button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
        

Recent comments

Recent comments

Latest Comments section by users

avatar
Maggie Marsh

March 07, 2021 Pending

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it.


avatar
Lara Stewart

March 15, 2021 Approved

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites.


avatar
Alexa Bennett

March 24, 2021 Rejected

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure.


avatar
Betty Walker

March 30, 2021 Pending

It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.


          <section style="background-color: #ad655f;">
            <div class="container my-5 py-5">
              <div class="row d-flex justify-content-center">
                <div class="col-md-12 col-lg-10">
                  <div class="card text-dark">
                    <div class="card-body p-4">
                      <h4 class="mb-0">Recent comments</h4>
                      <p class="fw-light mb-4 pb-2">Latest Comments section by users</p>

                      <div class="d-flex flex-start">
                        <img
                          class="rounded-circle shadow-1-strong me-3"
                          src="https://mdbootstrap.com/img/Photos/Avatars/img%20(23).jpg"
                          alt="avatar"
                          width="60"
                          height="60"
                        />
                        <div>
                          <h6 class="fw-bold mb-1">Maggie Marsh</h6>
                          <div class="d-flex align-items-center mb-3">
                            <p class="mb-0">
                              March 07, 2021
                              <span class="badge bg-primary">Pending</span>
                            </p>
                            <a href="#!" class="link-muted"
                              ><i class="fas fa-pencil-alt ms-2"></i
                            ></a>
                            <a href="#!" class="link-muted"><i class="fas fa-redo-alt ms-2"></i></a>
                            <a href="#!" class="link-muted"><i class="fas fa-heart ms-2"></i></a>
                          </div>
                          <p class="mb-0">
                            Lorem Ipsum is simply dummy text of the printing and typesetting
                            industry. Lorem Ipsum has been the industry's standard dummy text ever
                            since the 1500s, when an unknown printer took a galley of type and
                            scrambled it.
                          </p>
                        </div>
                      </div>
                    </div>

                    <hr class="my-0" />

                    <div class="card-body p-4">
                      <div class="d-flex flex-start">
                        <img
                          class="rounded-circle shadow-1-strong me-3"
                          src="https://mdbootstrap.com/img/Photos/Avatars/img%20(26).jpg"
                          alt="avatar"
                          width="60"
                          height="60"
                        />
                        <div>
                          <h6 class="fw-bold mb-1">Lara Stewart</h6>
                          <div class="d-flex align-items-center mb-3">
                            <p class="mb-0">
                              March 15, 2021
                              <span class="badge bg-success">Approved</span>
                            </p>
                            <a href="#!" class="link-muted"
                              ><i class="fas fa-pencil-alt ms-2"></i
                            ></a>
                            <a href="#!" class="text-success"
                              ><i class="fas fa-redo-alt ms-2"></i
                            ></a>
                            <a href="#!" class="link-danger"><i class="fas fa-heart ms-2"></i></a>
                          </div>
                          <p class="mb-0">
                            Contrary to popular belief, Lorem Ipsum is not simply random text. It
                            has roots in a piece of classical Latin literature from 45 BC, making it
                            over 2000 years old. Richard McClintock, a Latin professor at
                            Hampden-Sydney College in Virginia, looked up one of the more obscure
                            Latin words, consectetur, from a Lorem Ipsum passage, and going through
                            the cites.
                          </p>
                        </div>
                      </div>
                    </div>

                    <hr class="my-0" style="height: 1px;" />

                    <div class="card-body p-4">
                      <div class="d-flex flex-start">
                        <img
                          class="rounded-circle shadow-1-strong me-3"
                          src="https://mdbootstrap.com/img/Photos/Avatars/img%20(33).jpg"
                          alt="avatar"
                          width="60"
                          height="60"
                        />
                        <div>
                          <h6 class="fw-bold mb-1">Alexa Bennett</h6>
                          <div class="d-flex align-items-center mb-3">
                            <p class="mb-0">
                              March 24, 2021
                              <span class="badge bg-danger">Rejected</span>
                            </p>
                            <a href="#!" class="link-muted"
                              ><i class="fas fa-pencil-alt ms-2"></i
                            ></a>
                            <a href="#!" class="link-muted"><i class="fas fa-redo-alt ms-2"></i></a>
                            <a href="#!" class="link-muted"><i class="fas fa-heart ms-2"></i></a>
                          </div>
                          <p class="mb-0">
                            There are many variations of passages of Lorem Ipsum available, but the
                            majority have suffered alteration in some form, by injected humour, or
                            randomised words which don't look even slightly believable. If you are
                            going to use a passage of Lorem Ipsum, you need to be sure.
                          </p>
                        </div>
                      </div>
                    </div>

                    <hr class="my-0" />

                    <div class="card-body p-4">
                      <div class="d-flex flex-start">
                        <img
                          class="rounded-circle shadow-1-strong me-3"
                          src="https://mdbootstrap.com/img/Photos/Avatars/img%20(24).jpg"
                          alt="avatar"
                          width="60"
                          height="60"
                        />
                        <div>
                          <h6 class="fw-bold mb-1">Betty Walker</h6>
                          <div class="d-flex align-items-center mb-3">
                            <p class="mb-0">
                              March 30, 2021
                              <span class="badge bg-primary">Pending</span>
                            </p>
                            <a href="#!" class="link-muted"
                              ><i class="fas fa-pencil-alt ms-2"></i
                            ></a>
                            <a href="#!" class="link-muted"><i class="fas fa-redo-alt ms-2"></i></a>
                            <a href="#!" class="link-muted"><i class="fas fa-heart ms-2"></i></a>
                          </div>
                          <p class="mb-0">
                            It uses a dictionary of over 200 Latin words, combined with a handful of
                            model sentence structures, to generate Lorem Ipsum which looks
                            reasonable. The generated Lorem Ipsum is therefore always free from
                            repetition, injected humour, or non-characteristic words etc.
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
        

          .link-muted { color: #aaa; } .link-muted:hover { color: #1266f1; }
        

Unread comments

Unread comments (4)

Comments "ON"
avatar
lara_stewart Hmm, This poster looks cool

2 days ago

avatar
the_sylvester_cat Loving your work and profile!

3 days ago

avatar
mindyy_def Really cool Which filter are you using?

3 days ago

avatar
t_anya @macky_lones @rashida_jones Thanks

4 days ago


          <section style="background-color: #f7f6f6;">
            <div class="container my-5 py-5 text-dark">
              <div class="row d-flex justify-content-center">
                <div class="col-md-12 col-lg-10 col-xl-8">
                  <div class="d-flex justify-content-between align-items-center mb-4">
                    <h4 class="text-dark mb-0">Unread comments (4)</h4>
                    <div class="card">
                      <div class="card-body p-2 d-flex align-items-center">
                        <h6 class="text-primary fw-bold small mb-0 me-1">Comments "ON"</h6>
                        <div class="form-check form-switch">
                          <input
                            class="form-check-input"
                            type="checkbox"
                            id="flexSwitchCheckChecked"
                            checked
                          />
                          <label class="form-check-label" for="flexSwitchCheckChecked"></label>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="card mb-3">
                    <div class="card-body">
                      <div class="d-flex flex-start">
                        <img
                          class="rounded-circle shadow-1-strong me-3"
                          src="https://mdbootstrap.com/img/Photos/Avatars/img%20(26).jpg"
                          alt="avatar"
                          width="40"
                          height="40"
                        />
                        <div class="w-100">
                          <div class="d-flex justify-content-between align-items-center mb-3">
                            <h6 class="text-primary fw-bold mb-0">
                              lara_stewart
                              <span class="text-dark ms-2">Hmm, This poster looks cool</span>
                            </h6>
                            <p class="mb-0">2 days ago</p>
                          </div>
                          <div class="d-flex justify-content-between align-items-center">
                            <p class="small mb-0" style="color: #aaa;">
                              <a href="#!" class="link-grey">Remove</a> •
                              <a href="#!" class="link-grey">Reply</a> •
                              <a href="#!" class="link-grey">Translate</a>
                            </p>
                            <div class="d-flex flex-row">
                              <i class="fas fa-star text-warning me-2"></i>
                              <i class="far fa-check-circle" style="color: #aaa;"></i>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="card mb-3">
                    <div class="card-body">
                      <div class="d-flex flex-start">
                        <img
                          class="rounded-circle shadow-1-strong me-3"
                          src="https://mdbootstrap.com/img/Photos/Avatars/img%20(21).jpg"
                          alt="avatar"
                          width="40"
                          height="40"
                        />
                        <div class="w-100">
                          <div class="d-flex justify-content-between align-items-center mb-3">
                            <h6 class="text-primary fw-bold mb-0">
                              the_sylvester_cat
                              <span class="text-dark ms-2">Loving your work and profile! </span>
                            </h6>
                            <p class="mb-0">3 days ago</p>
                          </div>
                          <div class="d-flex justify-content-between align-items-center">
                            <p class="small mb-0" style="color: #aaa;">
                              <a href="#!" class="link-grey">Remove</a> •
                              <a href="#!" class="link-grey">Reply</a> •
                              <a href="#!" class="link-grey">Translate</a>
                            </p>
                            <div class="d-flex flex-row">
                              <i class="far fa-check-circle text-primary"></i>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="card mb-3">
                    <div class="card-body">
                      <div class="d-flex flex-start">
                        <img
                          class="rounded-circle shadow-1-strong me-3"
                          src="https://mdbootstrap.com/img/Photos/Avatars/img%20(20).jpg"
                          alt="avatar"
                          width="40"
                          height="40"
                        />
                        <div class="w-100">
                          <div class="d-flex justify-content-between align-items-center mb-3">
                            <h6 class="text-primary fw-bold mb-0">
                              mindyy_def
                              <span class="text-dark ms-2"
                                >Really cool Which filter are you using?
                              </span>
                            </h6>
                            <p class="mb-0">3 days ago</p>
                          </div>
                          <div class="d-flex justify-content-between align-items-center">
                            <p class="small mb-0" style="color: #aaa;">
                              <a href="#!" class="link-grey">Remove</a> •
                              <a href="#!" class="link-grey">Reply</a> •
                              <a href="#!" class="link-grey">Translate</a>
                            </p>
                            <div class="d-flex flex-row">
                              <i class="fas fa-user-plus" style="color: #aaa;"></i>
                              <i class="far fa-star mx-2" style="color: #aaa;"></i>
                              <i class="far fa-check-circle text-primary"></i>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="card mb-3">
                    <div class="card-body">
                      <div class="d-flex flex-start">
                        <img
                          class="rounded-circle shadow-1-strong me-3"
                          src="https://mdbootstrap.com/img/Photos/Avatars/img%20(14).jpg"
                          alt="avatar"
                          width="40"
                          height="40"
                        />
                        <div class="w-100">
                          <div class="d-flex justify-content-between align-items-center mb-3">
                            <h6 class="text-primary fw-bold mb-0">
                              t_anya
                              <span class="text-dark ms-2"
                                ><span class="text-primary">@macky_lones</span>
                                <span class="text-primary">@rashida_jones</span> Thanks
                              </span>
                            </h6>
                            <p class="mb-0">4 days ago</p>
                          </div>
                          <div class="d-flex justify-content-between align-items-center">
                            <p class="small mb-0" style="color: #aaa;">
                              <a href="#!" class="link-grey">Remove</a> •
                              <a href="#!" class="link-grey">Reply</a> •
                              <a href="#!" class="link-grey">Translate</a>
                            </p>
                            <div class="d-flex flex-row">
                              <i class="far fa-check-circle text-primary"></i>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
        

          .link-grey { color: #aaa; } .link-grey:hover { color: #00913b; }
        

Comments within column

avatar
Johny Cash

3 hours ago

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus ras purus odio, vestibulum in vulputate at, tempus viverra turpis.

avatar
Mindy Campbell

5 hours ago

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Delectus cumque doloribus dolorum dolor repellat nemo animi at iure autem fuga cupiditate architecto ut quam provident neque, inventore nisi eos quas?


          <section style="background-color: #e7effd;">
            <div class="container my-5 py-5 text-dark">
              <div class="row d-flex justify-content-center">
                <div class="col-md-11 col-lg-9 col-xl-7">
                  <div class="d-flex flex-start mb-4">
                    <img
                      class="rounded-circle shadow-1-strong me-3"
                      src="https://mdbootstrap.com/img/Photos/Avatars/img%20(32).jpg"
                      alt="avatar"
                      width="65"
                      height="65"
                    />
                    <div class="card w-100">
                      <div class="card-body p-4">
                        <div class="">
                          <h5>Johny Cash</h5>
                          <p class="small">3 hours ago</p>
                          <p>
                            Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque
                            ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus
                            viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.
                            Donec lacinia congue felis in faucibus ras purus odio, vestibulum in
                            vulputate at, tempus viverra turpis.
                          </p>

                          <div class="d-flex justify-content-between align-items-center">
                            <div class="d-flex align-items-center">
                              <a href="#!" class="link-muted me-2"
                                ><i class="fas fa-thumbs-up me-1"></i>132</a
                              >
                              <a href="#!" class="link-muted"
                                ><i class="fas fa-thumbs-down me-1"></i>15</a
                              >
                            </div>
                            <a href="#!" class="link-muted"
                              ><i class="fas fa-reply me-1"></i> Reply</a
                            >
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="d-flex flex-start">
                    <img
                      class="rounded-circle shadow-1-strong me-3"
                      src="https://mdbootstrap.com/img/Photos/Avatars/img%20(31).jpg"
                      alt="avatar"
                      width="65"
                      height="65"
                    />
                    <div class="card w-100">
                      <div class="card-body p-4">
                        <div class="">
                          <h5>Mindy Campbell</h5>
                          <p class="small">5 hours ago</p>
                          <p>
                            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Delectus
                            cumque doloribus dolorum dolor repellat nemo animi at iure autem fuga
                            cupiditate architecto ut quam provident neque, inventore nisi eos quas?
                          </p>

                          <div class="d-flex justify-content-between align-items-center">
                            <div class="d-flex align-items-center">
                              <a href="#!" class="link-muted me-2"
                                ><i class="fas fa-thumbs-up me-1"></i>158</a
                              >
                              <a href="#!" class="link-muted"
                                ><i class="fas fa-thumbs-down me-1"></i>13</a
                              >
                            </div>
                            <a href="#!" class="link-muted"
                              ><i class="fas fa-reply me-1"></i> Reply</a
                            >
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
        

          .link-muted { color: #aaa; } .link-muted:hover { color: #1266f1; }
        

Add a comment

avatar
Add a comment

          <section style="background-color: #d94125;">
            <div class="container my-5 py-5 text-dark">
              <div class="row d-flex justify-content-center">
                <div class="col-md-10 col-lg-8 col-xl-6">
                  <div class="card">
                    <div class="card-body p-4">
                      <div class="d-flex flex-start w-100">
                        <img
                          class="rounded-circle shadow-1-strong me-3"
                          src="https://mdbootstrap.com/img/Photos/Avatars/img%20(21).jpg"
                          alt="avatar"
                          width="65"
                          height="65"
                        />
                        <div class="w-100">
                          <h5>Add a comment</h5>
                          <ul class="rating mb-3" data-mdb-toggle="rating">
                            <li>
                              <i class="far fa-star fa-sm text-danger" title="Bad"></i>
                            </li>
                            <li>
                              <i class="far fa-star fa-sm text-danger" title="Poor"></i>
                            </li>
                            <li>
                              <i class="far fa-star fa-sm text-danger" title="OK"></i>
                            </li>
                            <li>
                              <i class="far fa-star fa-sm text-danger" title="Good"></i>
                            </li>
                            <li>
                              <i class="far fa-star fa-sm text-danger" title="Excellent"></i>
                            </li>
                          </ul>
                          <div class="form-outline">
                            <textarea class="form-control" id="textAreaExample" rows="4"></textarea>
                            <label class="form-label" for="textAreaExample"
                              >What is your view?</label
                            >
                          </div>
                          <div class="d-flex justify-content-between mt-3">
                            <button type="button" class="btn btn-success">Danger</button>
                            <button type="button" class="btn btn-danger">
                              Send <i class="fas fa-long-arrow-alt-right ms-1"></i>
                            </button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>