Feedback & Reviews - Snippets | Front - Multipurpose Responsive Template

Component #1

Preview
HTML

Student feedback

4.7

Course rating

205

Reviews

Dave Austin
April 3, 2019

This course helped me in learning python in a very simple and effective way & boosts up my confidence. Concepts have been explained in a crystal clear way.

Dave - Verified Purchase

Was this helpful?
Yes (45) No (21)
Hailey
January 19, 2019

HUUUUUUUUUUUGE fan of Emily Milda

Master of Python, I took other classes also. I was very impressed, a very good teacher, in detail explanations, easy to understand. I owe him many thanks and hopefully. THAAAANK YOUU!

Hailey - Verified Purchase

Was this helpful?
Yes (2) No (0)
Chrizelle
December 21, 2018

Section 19 needs to be addressed. the 1st topic in the section tells us it is optional and can be skipped. this is not true and your instructions tell us to contact udemy support if there is an issue. we did and they told us to contact you.

Chrizelle - Verified Purchase

Was this helpful?
Yes (0) No (0)

See all reviews

              
                <!-- Content -->
                <div class="container content-space-1">
                  <div class="mb-4">
                    <h3>Student feedback</h3>
                  </div>

                  <div class="row mb-5">
                    <div class="col-lg-4">
                      <!-- Card -->
                      <div class="card card-sm bg-primary text-center mb-3">
                        <div class="card-body">
                          <span class="display-4 text-white">4.7</span>

                          <div class="d-flex justify-content-center gap-2 mb-2">
                            <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="22">
                            <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="22">
                            <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="22">
                            <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="22">
                            <img src="../assets/svg/illustrations/star-half.svg" alt="Review rating" width="22">
                          </div>
                          <span class="text-white">Course rating</span>
                        </div>
                      </div>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->

                    <div class="col-lg-8">
                      <!-- Ratings -->
                      <div class="d-grid gap-2">
                        <a class="row align-items-center" href="#">
                          <div class="col-7">
                            <div class="progress">
                              <div class="progress-bar" role="progressbar" style="width: 100%;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                          </div>
                          <!-- End Col -->

                          <div class="col-2 text-end">
                            <div class="d-flex">
                              <div class="d-flex gap-1 me-2">
                                <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                              </div>
                              <span>205</span>
                            </div>
                          </div>
                          <!-- End Col -->
                        </a>
                        <!-- End Row -->

                        <a class="row align-items-center" href="#">
                          <div class="col-7">
                            <div class="progress">
                              <div class="progress-bar" role="progressbar" style="width: 53%;" aria-valuenow="53" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                          </div>
                          <!-- End Col -->

                          <div class="col-2 text-end">
                            <div class="d-flex">
                              <div class="d-flex gap-1 me-2">
                                <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                <img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
                              </div>
                              <span>55</span>
                            </div>
                          </div>
                          <!-- End Col -->
                        </a>
                        <!-- End Row -->
                        
                        <a class="row align-items-center" href="#">
                          <div class="col-7">
                            <div class="progress">
                              <div class="progress-bar" role="progressbar" style="width: 20%;" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                          </div>
                          <!-- End Col -->

                          <div class="col-2 text-end">
                            <div class="d-flex">
                              <div class="d-flex gap-1 me-2">
                                <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                <img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
                                <img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
                              </div>
                              <span>23</span>
                            </div>
                          </div>
                          <!-- End Col -->
                        </a>
                        <!-- End Row -->
                        
                        <a class="row align-items-center" href="#">
                          <div class="col-7">
                            <div class="progress">
                              <div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                          </div>
                          <!-- End Col -->

                          <div class="col-2 text-end">
                            <div class="d-flex">
                              <div class="d-flex gap-1 me-2">
                                <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                <img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
                                <img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
                                <img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
                              </div>
                              <span>0</span>
                            </div>
                          </div>
                          <!-- End Col -->
                        </a>
                        <!-- End Row -->
                        
                        <a class="row align-items-center" href="#">
                          <div class="col-7">
                            <div class="progress">
                              <div class="progress-bar" role="progressbar" style="width: 1%;" aria-valuenow="1" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                          </div>
                          <!-- End Col -->

                          <div class="col-2 text-end">
                            <div class="d-flex">
                              <div class="d-flex gap-1 me-2">
                                <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                <img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
                                <img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
                                <img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
                                <img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
                              </div>
                              <span>4</span>
                            </div>
                          </div>
                          <!-- End Col -->
                        </a>
                        <!-- End Row -->
                      </div>
                      <!-- End Ratings -->
                    </div>
                    <!-- End Col -->
                  </div>
                  <!-- End Row -->

                  <!-- Heading -->
                  <div class="border-bottom pb-4 mb-4">
                    <div class="row align-items-center">
                      <div class="col-sm-6 mb-2 mb-sm-0">
                        <h3 class="mb-0">Reviews</h3>
                      </div>
                      <!-- End Col -->

                      <div class="col-sm-6">
                        <!-- Form -->
                        <form>
                          <div class="input-group input-group-merge">
                            <input type="search" class="form-control" placeholder="Search reviews" aria-label="Search reviews">
                            <div class="input-group-append input-group-text">
                              <i class="bi-search"></i>
                            </div>
                          </div>
                        </form>
                        <!-- End Form -->
                      </div>
                      <!-- End Col -->
                    </div>
                    <!-- End Row -->
                  </div>
                  <!-- End Heading -->

                  <!-- Comment -->
                  <ul class="list-comment list-comment-divider mb-7">
                    <!-- Item -->
                    <li class="list-comment-item">
                      <div class="d-flex gap-1 mb-3">
                        <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                        <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                        <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                        <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                        <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                      </div>

                      <!-- Media -->
                      <div class="d-flex align-items-center mb-3">
                        <div class="flex-shrink-0">
                          <img class="avatar avatar-sm avatar-circle" src="../assets/img/160x160/img3.jpg" alt="Image Description">
                        </div>

                        <div class="flex-grow-1 ms-3">
                          <div class="d-flex justify-content-between align-items-center">
                            <h5 class="mb-0">Dave Austin</h5>
                            <span class="d-block small text-muted">April 3, 2019</span>
                          </div>
                        </div>
                      </div>
                      <!-- End Media -->

                      <div class="mb-5">
                        <p>This course helped me in learning python in a very simple and effective way & boosts up my confidence. Concepts have been explained in a crystal clear way.</p>
                      </div>

                      <div class="mb-2">
                        <span class="text-dark fw-semibold">Dave</span>
                        <span>- Verified Purchase</span>
                      </div>

                      <!-- Media -->
                      <div class="d-flex align-items-center">
                        <span class="small me-2">Was this helpful?</span>

                        <div class="d-flex gap-2">
                          <a class="btn btn-white btn-xs" href="javascript:;">
                            <i class="bi-hand-thumbs-up me-1"></i> Yes <span>(45)</span>
                          </a>
                          <a class="btn btn-white btn-xs" href="javascript:;">
                            <i class="bi-hand-thumbs-down me-1"></i> No <span>(21)</span>
                          </a>
                        </div>
                      </div>
                      <!-- End Media -->
                    </li>
                    <!-- End Item -->

                    <!-- Item -->
                    <li class="list-comment-item">
                      <div class="d-flex gap-1 mb-3">
                        <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                        <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                        <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                        <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                        <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                      </div>

                      <!-- Media -->
                      <div class="d-flex align-items-center mb-3">
                        <div class="flex-shrink-0">
                          <img class="avatar avatar-sm avatar-circle" src="../assets/img/160x160/img1.jpg" alt="Image Description">
                        </div>

                        <div class="flex-grow-1 ms-3">
                          <div class="d-flex justify-content-between align-items-center">
                            <h5 class="mb-0">Hailey</h5>
                            <span class="d-block small text-muted">January 19, 2019</span>
                          </div>
                        </div>
                      </div>
                      <!-- End Media -->

                      <div class="mb-5">
                        <p>HUUUUUUUUUUUGE fan of Emily Milda</p>
                        <p>Master of Python, I took other classes also. I was very impressed, a very good teacher, in detail explanations, easy to understand. I owe him many thanks and hopefully. THAAAANK YOUU!</p>
                      </div>

                      <div class="mb-2">
                        <span class="text-dark fw-semibold">Hailey</span>
                        <span>- Verified Purchase</span>
                      </div>

                      <!-- Media -->
                      <div class="d-flex align-items-center">
                        <span class="small me-2">Was this helpful?</span>

                        <div class="d-flex gap-2">
                          <a class="btn btn-white btn-xs" href="javascript:;">
                            <i class="bi-hand-thumbs-up me-1"></i> Yes <span>(2)</span>
                          </a>
                          <a class="btn btn-white btn-xs" href="javascript:;">
                            <i class="bi-hand-thumbs-down me-1"></i> No <span>(0)</span>
                          </a>
                        </div>
                      </div>
                      <!-- End Media -->
                    </li>
                    <!-- End Item -->

                    <!-- Item -->
                    <li class="list-comment-item">
                      <div class="d-flex gap-1 mb-3">
                        <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                        <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                        <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                        <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                        <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                      </div>

                      <!-- Media -->
                      <div class="d-flex align-items-center mb-3">
                        <div class="flex-shrink-0">
                          <img class="avatar avatar-sm avatar-circle" src="../assets/img/160x160/img8.jpg" alt="Image Description">
                        </div>

                        <div class="flex-grow-1 ms-3">
                          <div class="d-flex justify-content-between align-items-center">
                            <h5 class="mb-0">Chrizelle</h5>
                            <span class="d-block small text-muted">December 21, 2018</span>
                          </div>
                        </div>
                      </div>
                      <!-- End Media -->

                      <div class="mb-5">
                        <p>Section 19 needs to be addressed. the 1st topic in the section tells us it is optional and can be skipped. this is not true and your instructions tell us to contact udemy support if there is an issue. we did and they told us to contact you.</p>
                      </div>

                      <div class="mb-2">
                        <span class="text-dark fw-semibold">Chrizelle</span>
                        <span>- Verified Purchase</span>
                      </div>

                      <!-- Media -->
                      <div class="d-flex align-items-center">
                        <span class="small me-2">Was this helpful?</span>

                        <div class="d-flex gap-2">
                          <a class="btn btn-white btn-xs" href="javascript:;">
                            <i class="bi-hand-thumbs-up me-1"></i> Yes <span>(0)</span>
                          </a>
                          <a class="btn btn-white btn-xs" href="javascript:;">
                            <i class="bi-hand-thumbs-down me-1"></i> No <span>(0)</span>
                          </a>
                        </div>
                      </div>
                      <!-- End Media -->
                    </li>
                    <!-- End Item -->
                  </ul>
                  <!-- End Comment -->

                  <div class="text-center">
                    <a class="btn btn-outline-primary btn-transition" href="#">See all reviews</a>
                  </div>
                </div>
                <!-- End Content -->

4.7

287 reviews

Rating breakdown

77%

of customers recommend this product

Sort on

Christina Kray
April 3, 2019

I bought this hat for my boyfriend, but then i found out he cheated on me so I kept it and I love it!! I wear it all the time and there is no problem with the fit even though its a “mens” hat.

Christina - Verified Purchase

Was this helpful?
Yes (45) No (21)
Hailey
January 19, 2019

Material is great and the hat is comfortable and stylish.

Hailey - Verified Purchase

Was this helpful?
Yes (2) No (0)
Chrizelle
December 21, 2018

A really well built cap. It looks great and wears just as well. A great staple in ball caps.

Chrizelle - Verified Purchase

Was this helpful?
Yes (0) No (0)

              
                <!-- Review Section -->
                <div id="reviewSection" class="container content-space-2 content-space-lg-3">
                  <div class="row">
                    <div class="col-md-4 mb-7 mb-md-0">
                      <div class="border-bottom pb-4 mb-4">
                        <!-- Card -->
                        <div class="card bg-primary mb-3">
                          <div class="card-body">
                            <!-- Media -->
                            <div class="d-flex justify-content-center">
                              <div class="d-flex align-items-center">
                                <div class="flex-shrink-0">
                                  <span class="display-4 text-white">4.7</span>
                                </div>

                                <div class="flex-grow-1 ms-3">
                                  <!-- Rating -->
                                  <div class="d-flex gap-1 small">
                                    <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                    <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                    <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                    <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                    <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                  </div>
                                  <!-- End Rating -->
                                  <span class="text-white">287 reviews</span>
                                </div>
                              </div>
                            </div>
                            <!-- End Media -->
                          </div>
                        </div>
                        <!-- End Card -->

                        <h3>Rating breakdown</h3>

                        <!-- Ratings -->
                        <div class="d-grid gap-1">
                          <a class="row align-items-center" href="#" style="max-width: 25rem;">
                            <div class="col-3">
                              <span class="text-dark">5 stars</span>
                            </div>
                            <!-- End Col -->

                            <div class="col-7">
                              <div class="progress">
                                <div class="progress-bar" role="progressbar" style="width: 100%;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                              </div>
                            </div>
                            <!-- End Col -->

                            <div class="col-2 text-end">
                              <span>205</span>
                            </div>
                            <!-- End Col -->
                          </a>
                          <!-- End Row -->

                          <a class="row align-items-center" href="#" style="max-width: 25rem;">
                            <div class="col-3">
                              <span class="text-dark">4 stars</span>
                            </div>
                            <!-- End Col -->

                            <div class="col-7">
                              <div class="progress">
                                <div class="progress-bar" role="progressbar" style="width: 53%;" aria-valuenow="53" aria-valuemin="0" aria-valuemax="100"></div>
                              </div>
                            </div>
                            <!-- End Col -->

                            <div class="col-2 text-end">
                              <span>55</span>
                            </div>
                            <!-- End Col -->
                          </a>
                          <!-- End Row -->
                          
                          <a class="row align-items-center" href="#" style="max-width: 25rem;">
                            <div class="col-3">
                              <span class="text-dark">3 stars</span>
                            </div>
                            <!-- End Col -->

                            <div class="col-7">
                              <div class="progress">
                                <div class="progress-bar" role="progressbar" style="width: 20%;" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
                              </div>
                            </div>
                            <!-- End Col -->

                            <div class="col-2 text-end">
                              <span>23</span>
                            </div>
                            <!-- End Col -->
                          </a>
                          <!-- End Row -->
                          
                          <a class="row align-items-center" href="#" style="max-width: 25rem;">
                            <div class="col-3">
                              <span class="text-dark">2 stars</span>
                            </div>
                            <!-- End Col -->

                            <div class="col-7">
                              <div class="progress">
                                <div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                              </div>
                            </div>
                            <!-- End Col -->

                            <div class="col-2 text-end">
                              <span>0</span>
                            </div>
                            <!-- End Col -->
                          </a>
                          <!-- End Row -->
                          
                          <a class="row align-items-center" href="#" style="max-width: 25rem;">
                            <div class="col-3">
                              <span class="text-dark">1 stars</span>
                            </div>
                            <!-- End Col -->

                            <div class="col-7">
                              <div class="progress">
                                <div class="progress-bar" role="progressbar" style="width: 1%;" aria-valuenow="1" aria-valuemin="0" aria-valuemax="100"></div>
                              </div>
                            </div>
                            <!-- End Col -->

                            <div class="col-2 text-end">
                              <span>4</span>
                            </div>
                            <!-- End Col -->
                          </a>
                          <!-- End Row -->
                        </div>
                        <!-- End Ratings -->
                      </div>

                      <h4 class="display-4 text-primary">77%</h4>
                      <p class="small">of customers recommend this product</p>
                    </div>
                    <!-- End Col -->

                    <div class="col-md-8">
                      <div class="ps-md-4">
                        <!-- Heading -->
                        <div class="border-bottom pb-4 mb-4">
                          <div class="row align-items-center">
                            <div class="col-sm mb-2 mb-sm-0">
                              <h4 class="mb-0">Sort on</h4>
                            </div>
                            <!-- End Col -->

                            <div class="col-sm-auto">
                              <!-- Select -->
                              <select class="form-select form-select-sm">
                                <option value="mostRecent" selected>Most recent</option>
                                <option value="relevant">Relevant</option>
                                <option value="helpful">Helpful</option>
                                <option value="newest">Newest</option>
                              </select>
                              <!-- End Select -->
                            </div>
                            <!-- End Col -->
                          </div>
                          <!-- End Row -->
                        </div>
                        <!-- End Heading -->

                        <!-- Comment -->
                        <ul class="list-comment list-comment-divider mb-5">
                          <!-- Item -->
                          <li class="list-comment-item">
                            <div class="d-flex gap-1 mb-3">
                              <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                              <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                              <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                              <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                              <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                            </div>

                            <!-- Media -->
                            <div class="d-flex align-items-center mb-3">
                              <div class="flex-shrink-0">
                                <img class="avatar avatar-sm avatar-circle" src="../assets/img/160x160/img9.jpg" alt="Image Description">
                              </div>

                              <div class="flex-grow-1 ms-3">
                                <div class="d-flex justify-content-between align-items-center">
                                  <h5 class="mb-0">Christina Kray</h5>
                                  <span class="d-block small text-muted">April 3, 2019</span>
                                </div>
                              </div>
                            </div>
                            <!-- End Media -->

                            <div class="mb-5">
                              <p>I bought this hat for my boyfriend, but then i found out he cheated on me so I kept it and I love it!! I wear it all the time and there is no problem with the fit even though its a “mens” hat.</p>
                            </div>

                            <div class="mb-2">
                              <span class="text-dark fw-semibold">Christina</span>
                              <span>- Verified Purchase</span>
                            </div>

                            <!-- Media -->
                            <div class="d-flex align-items-center">
                              <span class="small me-2">Was this helpful?</span>

                              <div class="d-flex gap-2">
                                <a class="btn btn-white btn-xs" href="javascript:;">
                                  <i class="bi-hand-thumbs-up me-1"></i> Yes <span>(45)</span>
                                </a>
                                <a class="btn btn-white btn-xs" href="javascript:;">
                                  <i class="bi-hand-thumbs-down me-1"></i> No <span>(21)</span>
                                </a>
                              </div>
                            </div>
                            <!-- End Media -->
                          </li>
                          <!-- End Item -->

                          <!-- Item -->
                          <li class="list-comment-item">
                            <div class="d-flex gap-1 mb-3">
                              <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                              <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                              <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                              <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                              <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                            </div>

                            <!-- Media -->
                            <div class="d-flex align-items-center mb-3">
                              <div class="flex-shrink-0">
                                <img class="avatar avatar-sm avatar-circle" src="../assets/img/160x160/img1.jpg" alt="Image Description">
                              </div>

                              <div class="flex-grow-1 ms-3">
                                <div class="d-flex justify-content-between align-items-center">
                                  <h5 class="mb-0">Hailey</h5>
                                  <span class="d-block small text-muted">January 19, 2019</span>
                                </div>
                              </div>
                            </div>
                            <!-- End Media -->

                            <div class="mb-5">
                              <p>Material is great and the hat is comfortable and stylish.</p>
                            </div>

                            <div class="mb-2">
                              <span class="text-dark fw-semibold">Hailey</span>
                              <span>- Verified Purchase</span>
                            </div>

                            <!-- Media -->
                            <div class="d-flex align-items-center">
                              <span class="small me-2">Was this helpful?</span>

                              <div class="d-flex gap-2">
                                <a class="btn btn-white btn-xs" href="javascript:;">
                                  <i class="bi-hand-thumbs-up me-1"></i> Yes <span>(2)</span>
                                </a>
                                <a class="btn btn-white btn-xs" href="javascript:;">
                                  <i class="bi-hand-thumbs-down me-1"></i> No <span>(0)</span>
                                </a>
                              </div>
                            </div>
                            <!-- End Media -->
                          </li>
                          <!-- End Item -->

                          <!-- Item -->
                          <li class="list-comment-item">
                            <div class="d-flex gap-1 mb-3">
                              <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                              <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                              <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                              <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                              <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                            </div>

                            <!-- Media -->
                            <div class="d-flex align-items-center mb-3">
                              <div class="flex-shrink-0">
                                <img class="avatar avatar-sm avatar-circle" src="../assets/img/160x160/img8.jpg" alt="Image Description">
                              </div>

                              <div class="flex-grow-1 ms-3">
                                <div class="d-flex justify-content-between align-items-center">
                                  <h5 class="mb-0">Chrizelle</h5>
                                  <span class="d-block small text-muted">December 21, 2018</span>
                                </div>
                              </div>
                            </div>
                            <!-- End Media -->

                            <div class="mb-5">
                              <p>A really well built cap. It looks great and wears just as well. A great staple in ball caps.</p>
                            </div>

                            <div class="mb-2">
                              <span class="text-dark fw-semibold">Chrizelle</span>
                              <span>- Verified Purchase</span>
                            </div>

                            <!-- Media -->
                            <div class="d-flex align-items-center">
                              <span class="small me-2">Was this helpful?</span>

                              <div class="d-flex gap-2">
                                <a class="btn btn-white btn-xs" href="javascript:;">
                                  <i class="bi-hand-thumbs-up me-1"></i> Yes <span>(0)</span>
                                </a>
                                <a class="btn btn-white btn-xs" href="javascript:;">
                                  <i class="bi-hand-thumbs-down me-1"></i> No <span>(0)</span>
                                </a>
                              </div>
                            </div>
                            <!-- End Media -->
                          </li>
                          <!-- End Item -->
                        </ul>
                        <!-- End Comment -->

                        <div class="d-sm-flex justify-content-sm-end gap-2">
                          <a class="btn btn-link" href="#">Read more <i class="bi-chevron-right small ms-1"></i></a>
                          <button type="button" class="btn btn-primary btn-transition rounded-pill">Write a review</button>
                        </div>
                      </div>
                    </div>
                    <!-- End Col -->
                  </div>
                  <!-- End Row -->
                </div>
                <!-- End Review Section -->