Back to Reviews
Reviews

Compact Avatar List

Slim horizontal reviews with rating badges.

#reviews#bootstrap

Live preview

Source code

html
<div class="container py-5">
  <h3 class="fw-bold mb-4">Recent Reviews</h3>
  <div class="row g-3">
    <div class="col-lg-6">
      <div class="d-flex gap-3 p-3 bg-light rounded-3"><img src="https://i.pravatar.cc/60?img=22" class="rounded-circle" width="52" alt="Reviewer">
        <div class="flex-grow-1">
          <div class="d-flex justify-content-between">
            <h6 class="mb-0">Daniel Wu</h6><span class="badge bg-success">5.0</span>
          </div><small class="text-muted">2 days ago</small>
          <p class="mb-0 mt-2 small">Clean design, fast support, no complaints.</p>
        </div>
      </div>
    </div>
    <div class="col-lg-6">
      <div class="d-flex gap-3 p-3 bg-light rounded-3"><img src="https://i.pravatar.cc/60?img=35" class="rounded-circle" width="52" alt="Reviewer">
        <div class="flex-grow-1">
          <div class="d-flex justify-content-between">
            <h6 class="mb-0">Rita Alvarez</h6><span class="badge bg-success">4.8</span>
          </div><small class="text-muted">5 days ago</small>
          <p class="mb-0 mt-2 small">Would recommend to anyone building a startup.</p>
        </div>
      </div>
    </div>
    <div class="col-lg-6">
      <div class="d-flex gap-3 p-3 bg-light rounded-3"><img src="https://i.pravatar.cc/60?img=44" class="rounded-circle" width="52" alt="Reviewer">
        <div class="flex-grow-1">
          <div class="d-flex justify-content-between">
            <h6 class="mb-0">Ken Ito</h6><span class="badge bg-warning text-dark">4.2</span>
          </div><small class="text-muted">1 week ago</small>
          <p class="mb-0 mt-2 small">Good value; docs could be more detailed.</p>
        </div>
      </div>
    </div>
    <div class="col-lg-6">
      <div class="d-flex gap-3 p-3 bg-light rounded-3"><img src="https://i.pravatar.cc/60?img=52" class="rounded-circle" width="52" alt="Reviewer">
        <div class="flex-grow-1">
          <div class="d-flex justify-content-between">
            <h6 class="mb-0">Fatima Noor</h6><span class="badge bg-success">5.0</span>
          </div><small class="text-muted">2 weeks ago</small>
          <p class="mb-0 mt-2 small">Best design system I have used in years.</p>
        </div>
      </div>
    </div>
  </div>
</div>

More designs in this section