Reviews

<!-- Product review -->
<div class="border-top border-bottom py-3">
  <div class="d-flex align-items-center mb-3">
    <div class="text-nowrap me-3">
      <span class="h6 mb-0">Andrew Richards</span>
      <i class="ci-check-circle text-success align-middle ms-1" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-sm" title="Verified customer"></i>
    </div>
    <span class="text-body-secondary fs-sm ms-auto">May 7, 2024</span>
  </div>
  <div class="d-flex gap-1 fs-sm pb-2 mb-1">
    <i class="ci-star-filled text-warning"></i>
    <i class="ci-star-filled text-warning"></i>
    <i class="ci-star-filled text-warning"></i>
    <i class="ci-star-filled text-warning"></i>
    <i class="ci-star-filled text-warning"></i>
  </div>
  <ul class="list-inline gap-2 pb-2 mb-1">
    <li class="fs-sm me-4"><span class="text-dark-emphasis fw-medium">Color:</span> Purple</li>
    <li class="fs-sm"><span class="text-dark-emphasis fw-medium">Model:</span> 128GB</li>
  </ul>
  <p class="fs-sm">The iPhone 14 is nothing short of exceptional, combining cutting-edge technology with a design that continues to set the standard for premium smartphones. That's why it deserves a perfect 5-star rating.</p>
  <ul class="list-unstyled fs-sm pb-2 mb-1">
    <li><span class="text-dark-emphasis fw-medium">Pros:</span> Unparalleled performance, great camera, stunning design</li>
    <li><span class="text-dark-emphasis fw-medium">Cons:</span> No in my opinion</li>
  </ul>
  <div class="nav align-items-center">
    <button type="button" class="nav-link animate-underline px-0">
      <i class="ci-corner-down-right fs-base ms-1 me-1"></i>
      <span class="animate-target">Reply</span>
    </button>
    <button type="button" class="nav-link text-body-secondary animate-scale px-0 ms-auto me-n1">
      <i class="ci-thumbs-up text-success fs-base animate-target me-1"></i>
      29
    </button>
    <hr class="vr my-2 mx-3">
    <button type="button" class="nav-link text-body-secondary animate-scale px-0 ms-n1">
      <i class="ci-thumbs-down text-danger fs-base animate-target me-1"></i>
      5
    </button>
  </div>

  <!-- Reply -->
  <div class="ps-3 pb-2">
    <div class="d-flex align-items-center pt-3 pb-2 mb-1">
      <span class="badge bg-primary me-2">Reply</span>
      <span class="h6 mb-0 me-4">Cartzilla Company</span>
      <span class="text-body-secondary fs-sm">May 8, 2024</span>
    </div>
    <p class="fs-sm mb-0">Thank you for your feedback! We are glad that you were satisfied with your purchase :)</p>
  </div>
</div>

<!-- Product review -->
<div class="border-top border-bottom py-4">
  <div class="row py-sm-2">
    <div class="col-md-4 col-lg-3 mb-3 mb-md-0">
      <div class="d-flex h6 mb-2">
        Bessie Cooper
        <i class="ci-check-circle text-success mt-1 ms-2" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-sm" title="Verified customer"></i>
      </div>
      <div class="fs-sm mb-2 mb-md-3">April 8, 2024</div>
      <div class="d-flex gap-1 fs-sm">
        <i class="ci-star-filled text-body-emphasis"></i>
        <i class="ci-star-filled text-body-emphasis"></i>
        <i class="ci-star text-body-tertiary opacity-75"></i>
        <i class="ci-star text-body-tertiary opacity-75"></i>
        <i class="ci-star text-body-tertiary opacity-75"></i>
      </div>
    </div>
    <div class="col-md-8 col-lg-9">
      <p class="mb-md-4">While the design of the chair is nice and it does add a touch of retro vibe to my space, I found the quality to be lacking. After just a few weeks of use, one of the legs started to wobble, and the seat isn't as comfortable as I had hoped. Disappointed with the durability. Additionally, the assembly process was a bit frustrating as some of the screws didn't align properly with the holes, requiring extra effort to secure them in place. Overall, while it looks good, I expected better quality for the price.</p>
      <div class="d-sm-flex justify-content-between">
        <div class="d-flex align-items-center fs-sm fw-medium text-dark-emphasis pb-2 pb-sm-0 mb-1 mb-sm-0">
          <i class="ci-close fs-base me-1" style="margin-top: .125rem"></i>
          No, I don't recommend this product
        </div>
        <div class="d-flex align-items-center gap-2">
          <div class="fs-sm fw-medium text-dark-emphasis me-1">Helpful?</div>
          <button type="button" class="btn btn-sm btn-secondary">
            <i class="ci-thumbs-up fs-sm ms-n1 me-1"></i>
            3
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Review inside card: Variant 1 -->
<div class="card rounded-4 p-sm-2">
  <div class="card-body">
    <div class="d-flex align-items-center mb-3">
      <!-- Wrap the image with a "ratio" element to avoid content shifts on page load -->
      <div class="ratio ratio-1x1 flex-shrink-0" style="max-width: 80px">
        <img src="assets/img/home/fashion/v1/reviews/02.png" width="80" alt="Image">
      </div>
      <div class="ps-2 ms-1">
        <div class="d-flex gap-1 fs-xs pb-2 mb-1">
          <i class="ci-star-filled text-warning"></i>
          <i class="ci-star-filled text-warning"></i>
          <i class="ci-star-filled text-warning"></i>
          <i class="ci-star-filled text-warning"></i>
          <i class="ci-star-filled text-warning"></i>
        </div>
        <h3 class="h6 mb-0">Alexandra D.</h3>
      </div>
    </div>
    <p class="mb-0">A wonderful compact bag, holds a lot of things, good tailoring, smooth seams, strong fittings, good quality.</p>
  </div>
</div>

<!-- Review inside card: Variant 2 -->
<div class="card bg-transparent border-0 rounded-5 shadow overflow-hidden p-xl-2">
  <div class="card-body position-relative z-1 pb-1 pb-lg-2 pb-xl-3">
    <div class="d-flex gap-1 text-warning mb-3">
      <i class="ci-star-filled"></i>
      <i class="ci-star-filled"></i>
      <i class="ci-star-filled"></i>
      <i class="ci-star-filled"></i>
      <i class="ci-star-filled"></i>
    </div>
    <h3 class="h5 pb-2 mb-1">Perfect for daily use!</h3>
    <p class="mb-0">I bought the metallic blue bottle, and it has quickly become my go-to for everything! It keeps my water cold all day, even during my long shifts at work. Absolutely love it 🤩</p>
  </div>
  <div class="card-footer position-relative z-1 d-flex align-items-center bg-transparent border-0 py-4">
    <!-- Wrap the image with a "ratio" element to avoid content shifts on page load -->
    <div class="ratio ratio-1x1 flex-shrink-0 bg-body-secondary rounded-circle overflow-hidden" style="width: 44px">
      <img src="assets/img/home/single-product/reviews/ava01.jpg" alt="Avatar">
    </div>
    <div class="fs-sm ps-2 ms-1">
      <div class="fw-semibold text-dark-emphasis">Jenny Wilson</div>
      <div>Freshness Bottle</div>
    </div>
  </div>
  <span class="position-absolute top-0 start-0 w-100 h-100 bg-white d-none-dark"></span>
  <span class="position-absolute top-0 start-0 w-100 h-100 bg-white d-none d-block-dark" style="opacity: .08"></span>
</div>