Reviews
Display customer feedback with ratings, enhancing credibility and informing potential buyers.
Review: Variant 1
Bessie Cooper
May 19, 2024
Mike exhibited great professionalism and politeness. I hired him to replace the door springs, which he did efficiently in a short amount of time. I would wholeheartedly recommend his services to anyone. I'm delighted that everything is now functioning like new again.
<!-- Review: Variant 1 -->
<div class="border-bottom pb-3">
<div class="d-flex align-items-center mb-2">
<span class="h6 mb-0">Bessie Cooper</span>
<span class="text-body-secondary fs-sm ms-auto">May 19, 2024</span>
</div>
<div class="d-flex gap-1 fs-sm pb-2 mb-1">
<i class="fi-star-filled text-warning"></i>
<i class="fi-star-filled text-warning"></i>
<i class="fi-star-filled text-warning"></i>
<i class="fi-star-filled text-warning"></i>
<i class="fi-star-half text-warning"></i>
</div>
<p class="fs-sm pb-2 mb-1">Mike exhibited great professionalism and politeness. I hired him to replace the door springs, which he did efficiently in a short amount of time. I would wholeheartedly recommend his services to anyone. I'm delighted that everything is now functioning like new again.</p>
<div class="nav align-items-center">
<button type="button" class="nav-link text-body-secondary animate-scale px-0 me-n1">
<i class="fi-thumbs-up fs-base animate-target me-1"></i>
6
</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="fi-thumbs-down fs-base animate-target me-1"></i>
0
</button>
</div>
</div>Review: Variant 1 with reply
Andrew Richards
June 7, 2024
From start to finish, his cooperation was incredibly smooth. The pricing was quite reasonable, and the task was completed efficiently and with a high level of cleanliness. I'm delighted that we chose Mike over the other companies we considered based on quotes.
Reply
Mike Gardner
June 8, 2024
Thank you for your feedback! I'm glad that you are satisfied with my services :)
<!-- Review: Variant 1 with reply -->
<div class="border-bottom py-3">
<div class="d-flex align-items-center mb-2">
<span class="h6 mb-0">Andrew Richards</span>
<span class="text-body-secondary fs-sm ms-auto">June 7, 2024</span>
</div>
<div class="d-flex gap-1 fs-sm pb-2 mb-1">
<i class="fi-star-filled text-warning"></i>
<i class="fi-star-filled text-warning"></i>
<i class="fi-star-filled text-warning"></i>
<i class="fi-star-filled text-warning"></i>
<i class="fi-star-filled text-warning"></i>
</div>
<p class="fs-sm pb-2 mb-1">From start to finish, his cooperation was incredibly smooth. The pricing was quite reasonable, and the task was completed efficiently and with a high level of cleanliness. I'm delighted that we chose Mike over the other companies we considered based on quotes.</p>
<div class="nav align-items-center">
<button type="button" class="nav-link text-body-secondary animate-scale px-0 me-n1">
<i class="fi-thumbs-up 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="fi-thumbs-down 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-body-secondary text-body-emphasis me-2">Reply</span>
<span class="h6 mb-0 me-4">Mike Gardner</span>
<span class="text-body-secondary fs-sm">June 8, 2024</span>
</div>
<p class="fs-sm mb-0">Thank you for your feedback! I'm glad that you are satisfied with my services :)</p>
</div>
</div>Review: Variant 2
Ralph Edwards
Jul 4, 2024
Review on:1234 Maple Street, Brooklyn, NY 11201
I recently rented an apartment and had a positive experience overall. The location is convenient, and the building amenities are great. The apartment itself is spacious and well-maintained. However, there were a few minor issues with the plumbing that took a little longer to fix than expected. Despite that, I'm happy with my decision and would recommend it to others.
<!-- Review: Variant 2 -->
<div class="border-bottom py-4">
<div class="d-sm-flex align-items-center mt-2 mb-3">
<div class="d-flex align-items-center pe-3">
<div class="ratio ratio-1x1 flex-shrink-0 bg-body-secondary rounded-circle overflow-hidden" style="width: 48px">
<img src="assets/img/account/reviews/ava04.jpg" alt="Avatar">
</div>
<div class="ps-3">
<h6 class="mb-1">Ralph Edwards</h6>
<div class="fs-xs text-body-secondary">Jul 4, 2024</div>
</div>
</div>
<div class="d-flex gap-1 fs-sm pt-2 pt-sm-0 ps-5 ps-sm-0 ms-3 ms-sm-auto">
<i class="fi-star-filled text-warning"></i>
<i class="fi-star-filled text-warning"></i>
<i class="fi-star-filled text-warning"></i>
<i class="fi-star-filled text-warning"></i>
<i class="fi-star text-warning"></i>
</div>
</div>
<p class="fs-sm mb-2">Review on:<a class="hover-effect-underline fw-medium text-dark-emphasis text-decoration-none ms-2" href="#!">1234 Maple Street, Brooklyn, NY 11201</a></p>
<p class="fs-sm">I recently rented an apartment and had a positive experience overall. The location is convenient, and the building amenities are great. The apartment itself is spacious and well-maintained. However, there were a few minor issues with the plumbing that took a little longer to fix than expected. Despite that, I'm happy with my decision and would recommend it to others.</p>
<div class="d-flex align-items-center justify-content-between mb-2">
<button type="button" class="btn btn-sm btn-outline-secondary">
<i class="fi-corner-up-left fs-sm ms-n1 me-2"></i>
Reply
</button>
<div class="nav">
<a class="nav-link position-relative fs-xs py-1 px-0" href="#!">
<i class="fi-info fs-sm me-1"></i>
<span class="hover-effect-underline stretched-link">Report</span>
</a>
</div>
</div>
</div>Review: Variant 2 with reply
Randy Walker
Nov 12, 2024
Review on:67-04 Myrtle Ave Glendale, NY 11385
Excellent apartment in the very center of the city, attractions and entertainment venues are located 50m from the flat. The flat was perfectly clean and had basic slippers, gel-shampoo, clean towels.
Michael Williams
Nov 13, 2024
Thank you for your feedback. I'm glad you were satisfied :)
<!-- Review: Variant 2 with reply -->
<div class="border-bottom py-4">
<div class="d-sm-flex align-items-center mt-2 mb-3">
<div class="d-flex align-items-center pe-3">
<div class="ratio ratio-1x1 flex-shrink-0 bg-body-secondary rounded-circle overflow-hidden" style="width: 48px">
<img src="assets/img/account/reviews/ava01.jpg" alt="Avatar">
</div>
<div class="ps-3">
<h6 class="mb-1">Randy Walker</h6>
<div class="fs-xs text-body-secondary">Nov 12, 2024</div>
</div>
</div>
<div class="d-flex gap-1 fs-sm pt-2 pt-sm-0 ps-5 ps-sm-0 ms-3 ms-sm-auto">
<i class="fi-star-filled text-warning"></i>
<i class="fi-star-filled text-warning"></i>
<i class="fi-star-filled text-warning"></i>
<i class="fi-star-filled text-warning"></i>
<i class="fi-star-filled text-warning"></i>
</div>
</div>
<p class="fs-sm mb-2">Review on:<a class="hover-effect-underline fw-medium text-dark-emphasis text-decoration-none ms-2" href="#!">67-04 Myrtle Ave Glendale, NY 11385</a></p>
<p class="fs-sm mb-0">Excellent apartment in the very center of the city, attractions and entertainment venues are located 50m from the flat. The flat was perfectly clean and had basic slippers, gel-shampoo, clean towels.</p>
<div class="bg-body-tertiary rounded p-4 mt-4 mb-2">
<div class="d-flex align-items-center mb-3">
<div class="ratio ratio-1x1 flex-shrink-0 bg-body-secondary rounded-circle overflow-hidden" style="width: 38px">
<img src="assets/img/account/avatar-sm.jpg" alt="Avatar">
</div>
<div class="ps-3">
<h6 class="mb-1">Michael Williams</h6>
<div class="fs-xs text-body-secondary">Nov 13, 2024</div>
</div>
</div>
<p class="fs-sm mb-0">Thank you for your feedback. I'm glad you were satisfied :)</p>
</div>
</div>Review: Variant 3
Jan 17, 2024
Excellent apartment in the very center of the city, attractions and entertainment venues are located 50m from the flat. The flat was perfectly clean and had basic slippers, gel-shampoo, clean towels.
6
0
<!-- Review: Variant 3 -->
<div class="border-bottom py-4">
<div class="d-flex align-items-start align-items-sm-center mt-2 mb-3">
<div class="ratio ratio-1x1" style="max-width: 112px">
<img src="assets/img/account/reviews/01.jpg" class="bg-body-tertiary rounded" alt="Image">
</div>
<div class="d-flex align-items-start justify-content-between w-100">
<div class="ps-3 pe-2 pe-sm-3">
<span class="badge text-info bg-info-subtle mb-2">Published</span>
<div class="d-flex gap-1 fs-sm py-sm-1 mb-2">
<i class="fi-star-filled text-warning"></i>
<i class="fi-star-filled text-warning"></i>
<i class="fi-star-filled text-warning"></i>
<i class="fi-star-filled text-warning"></i>
<i class="fi-star-half text-warning"></i>
</div>
<p class="fs-sm mb-2 mb-sm-0">Review on:<a class="hover-effect-underline fw-medium text-dark-emphasis text-decoration-none ms-2" href="#!">67-04 Myrtle Ave Glendale, NY 11385</a></p>
<div class="fs-xs text-body-secondary d-sm-none">Jan 17, 2024</div>
</div>
<div class="text-end ms-n5 ms-sm-0">
<!-- Review administration dropdown -->
<div class="dropdown mb-sm-4">
<button type="button" class="btn btn-icon btn-outline-secondary" data-bs-toggle="dropdown" aria-expanded="false" aria-label="Actions">
<i class="fi-more-vertical fs-lg"></i>
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li>
<a class="dropdown-item" href="#!">
<i class="fi-edit opacity-75 me-2"></i>
Edit
</a>
</li>
<li>
<a class="dropdown-item" href="#!">
<i class="fi-archive opacity-75 me-2"></i>
Move to archive
</a>
</li>
<li>
<a class="dropdown-item text-danger" href="#!">
<i class="fi-trash opacity-75 me-2"></i>
Delete
</a>
</li>
</ul>
</div>
<div class="fs-xs text-body-secondary d-none d-sm-block">Jan 17, 2024</div>
</div>
</div>
</div>
<p class="fs-sm">Excellent apartment in the very center of the city, attractions and entertainment venues are located 50m from the flat. The flat was perfectly clean and had basic slippers, gel-shampoo, clean towels.</p>
<div class="d-flex align-items-center fs-sm fw-medium text-body-secondary">
<div class="d-flex align-items-center me-n1">
<i class="fi-thumbs-up fs-base me-1"></i>
6
</div>
<hr class="vr my-2 mx-3">
<div class="d-flex align-items-center ms-n1">
<i class="fi-thumbs-down fs-base animate-target me-1"></i>
0
</div>
</div>
</div>Rating breakdown
4.5
76 reviews
5
44
4
17
3
9
2
4
1
2
<div class="row g-4">
<div class="col-sm-5 col-md-3">
<!-- Overall rating card -->
<div class="d-flex flex-column align-items-center justify-content-center h-100 bg-body-tertiary rounded p-4">
<div class="h1 pb-2 mb-1">4.5</div>
<div class="hstack justify-content-center gap-1 fs-sm mb-2">
<i class="fi-star-filled text-warning"></i>
<i class="fi-star-filled text-warning"></i>
<i class="fi-star-filled text-warning"></i>
<i class="fi-star-filled text-warning"></i>
<i class="fi-star-half text-warning"></i>
</div>
<div class="fs-sm">76 reviews</div>
</div>
</div>
<div class="col-sm-7 col-md-9">
<!-- Rating breakdown by quantity -->
<div class="vstack gap-3">
<!-- 5 stars -->
<div class="hstack gap-2">
<div class="hstack fs-sm gap-1">
5<i class="fi-star-filled text-warning"></i>
</div>
<div class="progress w-100" role="progressbar" aria-label="Five stars" aria-valuenow="58" aria-valuemin="0" aria-valuemax="100" style="height: 4px">
<div class="progress-bar bg-warning rounded-pill" style="width: 58%"></div>
</div>
<div class="fs-sm text-nowrap text-end" style="width: 40px;">44</div>
</div>
<!-- 4 stars -->
<div class="hstack gap-2">
<div class="hstack fs-sm gap-1">
4<i class="fi-star-filled text-warning"></i>
</div>
<div class="progress w-100" role="progressbar" aria-label="Four stars" aria-valuenow="22.4" aria-valuemin="0" aria-valuemax="100" style="height: 4px">
<div class="progress-bar bg-warning rounded-pill" style="width: 22.4%"></div>
</div>
<div class="fs-sm text-nowrap text-end" style="width: 40px;">17</div>
</div>
<!-- 3 stars -->
<div class="hstack gap-2">
<div class="hstack fs-sm gap-1">
3<i class="fi-star-filled text-warning"></i>
</div>
<div class="progress w-100" role="progressbar" aria-label="Three stars" aria-valuenow="12" aria-valuemin="0" aria-valuemax="100" style="height: 4px">
<div class="progress-bar bg-warning rounded-pill" style="width: 12%"></div>
</div>
<div class="fs-sm text-nowrap text-end" style="width: 40px;">9</div>
</div>
<!-- 2 stars -->
<div class="hstack gap-2">
<div class="hstack fs-sm gap-1">
2<i class="fi-star-filled text-warning"></i>
</div>
<div class="progress w-100" role="progressbar" aria-label="Two stars" aria-valuenow="5" aria-valuemin="0" aria-valuemax="100" style="height: 4px">
<div class="progress-bar bg-warning rounded-pill" style="width: 5%"></div>
</div>
<div class="fs-sm text-nowrap text-end" style="width: 40px;">4</div>
</div>
<!-- 1 star -->
<div class="hstack gap-2">
<div class="hstack fs-sm gap-1">
1<i class="fi-star-filled text-warning"></i>
</div>
<div class="progress w-100" role="progressbar" aria-label="One star" aria-valuenow="2.6" aria-valuemin="0" aria-valuemax="100" style="height: 4px">
<div class="progress-bar bg-warning rounded-pill" style="width: 2.6%"></div>
</div>
<div class="fs-sm text-nowrap text-end" style="width: 40px;">2</div>
</div>
</div>
</div>
</div>