Bootstrap 5 Rating and Review System with Comments

<section class="wdw-stage">
  <div class="container" style="max-width: 680px">
    <div class="wdw-card p-4 p-md-5 mb-4">
      <div class="row g-4 align-items-center">
        <div class="col-sm-4 text-center">
          <div class="display-3 fw-bolder text-body-emphasis lh-1">4.0</div>
          <div class="mt-2 mb-1"><span class="text-warning d-inline-flex gap-1" role="img" aria-label="Average rating 4.0 out of 5"><svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1.75" stroke-linejoin="round" aria-hidden="true"><path d="M12 3l2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1L3.2 9.5l6.1-.9z"/></svg><svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1.75" stroke-linejoin="round" aria-hidden="true"><path d="M12 3l2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1L3.2 9.5l6.1-.9z"/></svg><svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1.75" stroke-linejoin="round" aria-hidden="true"><path d="M12 3l2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1L3.2 9.5l6.1-.9z"/></svg><svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1.75" stroke-linejoin="round" aria-hidden="true"><path d="M12 3l2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1L3.2 9.5l6.1-.9z"/></svg><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linejoin="round" aria-hidden="true"><path d="M12 3l2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1L3.2 9.5l6.1-.9z"/></svg></span></div>
          <span class="visually-hidden">Average rating 4.0 out of 5</span><div class="small wdw-muted">Based on 159 reviews</div>
        </div>
        <div class="col-sm-8 d-grid gap-2"><div class="d-flex align-items-center gap-3 small"><span class="rv-label text-body-emphasis">Excellent</span><div class="progress flex-grow-1" role="progressbar" aria-label="Excellent" aria-valuenow="77" aria-valuemin="0" aria-valuemax="100" style="height:.5rem"><div class="progress-bar bg-warning rounded-pill" style="width:77%"></div></div><span class="rv-count wdw-muted text-end">123</span></div><div class="d-flex align-items-center gap-3 small"><span class="rv-label">Good</span><div class="progress flex-grow-1" role="progressbar" aria-label="Good" aria-valuenow="14" aria-valuemin="0" aria-valuemax="100" style="height:.5rem"><div class="progress-bar bg-warning rounded-pill" style="width:14%"></div></div><span class="rv-count wdw-muted text-end">23</span></div><div class="d-flex align-items-center gap-3 small"><span class="rv-label">Average</span><div class="progress flex-grow-1" role="progressbar" aria-label="Average" aria-valuenow="6" aria-valuemin="0" aria-valuemax="100" style="height:.5rem"><div class="progress-bar bg-warning rounded-pill" style="width:6%"></div></div><span class="rv-count wdw-muted text-end">10</span></div><div class="d-flex align-items-center gap-3 small"><span class="rv-label">Poor</span><div class="progress flex-grow-1" role="progressbar" aria-label="Poor" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="height:.5rem"><div class="progress-bar bg-warning rounded-pill" style="width:2%"></div></div><span class="rv-count wdw-muted text-end">3</span></div><div class="d-flex align-items-center gap-3 small"><span class="rv-label">Terrible</span><div class="progress flex-grow-1" role="progressbar" aria-label="Terrible" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="height:.5rem"><div class="progress-bar bg-warning rounded-pill" style="width:0%"></div></div><span class="rv-count wdw-muted text-end">0</span></div></div>
      </div>
      <div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mt-4 pt-4 border-top">
        <button type="button" class="btn btn-primary rounded-pill px-4">Write a review</button>
        <div class="d-flex align-items-center gap-2"><label class="small wdw-muted" for="rvSort">Sort by</label><select class="form-select form-select-sm rounded-pill w-auto" id="rvSort"><option>Most helpful</option><option>Newest</option><option>Highest rated</option><option>Lowest rated</option></select></div>
      </div>
    </div>
    <article class="wdw-card p-4 p-md-5">
      <div class="d-flex align-items-center gap-3 mb-3">
        <img src="https://i.pravatar.cc/120?img=12" width="56" height="56" class="rounded-circle" alt="Vikram Singh">
        <div class="flex-grow-1">
          <h2 class="h6 mb-1">Vikram Singh <span class="badge rounded-pill bg-success-subtle text-success-emphasis ms-1">Verified</span></h2>
          <div><span class="text-warning d-inline-flex gap-1" role="img" aria-label="Rated 4 out of 5"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1.75" stroke-linejoin="round" aria-hidden="true"><path d="M12 3l2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1L3.2 9.5l6.1-.9z"/></svg><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1.75" stroke-linejoin="round" aria-hidden="true"><path d="M12 3l2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1L3.2 9.5l6.1-.9z"/></svg><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1.75" stroke-linejoin="round" aria-hidden="true"><path d="M12 3l2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1L3.2 9.5l6.1-.9z"/></svg><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1.75" stroke-linejoin="round" aria-hidden="true"><path d="M12 3l2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1L3.2 9.5l6.1-.9z"/></svg><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linejoin="round" aria-hidden="true"><path d="M12 3l2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1L3.2 9.5l6.1-.9z"/></svg></span></div>
        </div>
        <span class="visually-hidden">Rated 4 out of 5</span><time class="small wdw-muted" datetime="2026-09-10">10 Sep</time>
      </div>
      <h3 class="h5 text-primary mb-2">An awesome activity to experience</h3>
      <p class="mb-3">If you really enjoy spending your vacation on water or would like to try something new and exciting for the first time, this is the one. The guides were patient and the views were unreal.</p>
      <div class="d-flex flex-wrap gap-2 mb-4"><img src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?w=240&h=240&fit=crop" width="72" height="72" class="rounded-3 object-fit-cover" alt="Photo from the trip 1"><img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=240&h=240&fit=crop" width="72" height="72" class="rounded-3 object-fit-cover" alt="Photo from the trip 2"><img src="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=240&h=240&fit=crop" width="72" height="72" class="rounded-3 object-fit-cover" alt="Photo from the trip 3"></div>
      <div class="d-flex align-items-center gap-2 pt-3 border-top">
        <span class="small wdw-muted me-2">Was this helpful?</span>
        <button type="button" class="btn btn-sm vote-btn rounded-pill vote" data-vote="up" aria-pressed="false"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 11v9H3v-9zM7 11l4-8a2 2 0 012 2v4h6a2 2 0 012 2.3l-1.2 7A2 2 0 0117.8 20H7"/></svg><span class="vote-n">20</span></button>
        <button type="button" class="btn btn-sm vote-btn rounded-pill vote" data-vote="down" aria-pressed="false"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="transform:scaleY(-1)"><path d="M7 11v9H3v-9zM7 11l4-8a2 2 0 012 2v4h6a2 2 0 012 2.3l-1.2 7A2 2 0 0117.8 20H7"/></svg><span class="vote-n">4</span></button>
      </div>
    </article>
  </div>
</section>

/* Web Designer Wall library style — shared base for every Bootstrap 5 snippet.
   Indigo accent, Plus Jakarta Sans, soft cards, pill buttons. Works in light and dark. */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");

:root,
[data-bs-theme="light"] {
  --wdw-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-font-family: var(--wdw-font);
  --bs-primary: #4f46e5;
  --bs-primary-rgb: 79, 70, 229;
  --bs-primary-text-emphasis: #3730a3;
  --bs-primary-bg-subtle: #eef2ff;
  --bs-primary-border-subtle: #c7d2fe;
  --bs-link-color: #4f46e5;
  --bs-link-color-rgb: 79, 70, 229;
  --bs-link-hover-color: #4338ca;
  --bs-link-hover-color-rgb: 67, 56, 202;
  --bs-focus-ring-color: rgba(79, 70, 229, 0.25);
  --bs-border-radius: 0.75rem;
  --bs-border-radius-lg: 1rem;
  --bs-border-radius-xl: 1.25rem;
  --wdw-radius-card: 1.25rem;
  --wdw-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 16px 40px -16px rgba(16, 24, 40, 0.22);
  --wdw-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 4px 12px -4px rgba(16, 24, 40, 0.12);
  --wdw-stage: #f5f6fb;
}

[data-bs-theme="dark"] {
  --bs-primary: #818cf8;
  --bs-primary-rgb: 129, 140, 248;
  --bs-primary-text-emphasis: #c7d2fe;
  --bs-primary-bg-subtle: rgba(129, 140, 248, 0.14);
  --bs-primary-border-subtle: rgba(129, 140, 248, 0.35);
  --bs-link-color: #a5b4fc;
  --bs-link-color-rgb: 165, 180, 252;
  --bs-link-hover-color: #c7d2fe;
  --bs-link-hover-color-rgb: 199, 210, 254;
  --bs-focus-ring-color: rgba(129, 140, 248, 0.35);
  --wdw-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 16px 40px -16px rgba(0, 0, 0, 0.7);
  --wdw-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px -4px rgba(0, 0, 0, 0.5);
  --wdw-stage: #0f1117;
}

body { font-family: var(--wdw-font); -webkit-font-smoothing: antialiased; }

/* Bootstrap compiles its blue into these components; point them at the accent. */
.btn-primary {
  --bs-btn-bg: var(--bs-primary); --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: #4338ca; --bs-btn-hover-border-color: #4338ca;
  --bs-btn-active-bg: #3730a3; --bs-btn-active-border-color: #3730a3;
  --bs-btn-disabled-bg: var(--bs-primary); --bs-btn-disabled-border-color: var(--bs-primary);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}
[data-bs-theme="dark"] .btn-primary { --bs-btn-color: #0f1117; --bs-btn-hover-bg: #a5b4fc; --bs-btn-hover-border-color: #a5b4fc; --bs-btn-hover-color: #0f1117; --bs-btn-active-color: #0f1117; }
.btn-outline-primary {
  --bs-btn-color: var(--bs-primary); --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-primary); --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-active-bg: var(--bs-primary); --bs-btn-active-border-color: var(--bs-primary);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}
.btn { --bs-btn-font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; }
.btn-sm { min-height: 36px; }
.form-control, .form-select { min-height: 44px; border-radius: .75rem; }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: rgba(var(--bs-primary-rgb), .6); box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color); }
.form-check-input:checked { background-color: var(--bs-primary); border-color: var(--bs-primary); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--bs-primary); }
.nav { --bs-nav-link-color: var(--bs-secondary-color); --bs-nav-link-hover-color: var(--bs-emphasis-color); }
.pagination { --bs-pagination-active-bg: var(--bs-primary); --bs-pagination-active-border-color: var(--bs-primary); --bs-pagination-color: var(--bs-body-color); --bs-pagination-focus-box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color); }
.progress, .progress-stacked { --bs-progress-bar-bg: var(--bs-primary); }
.list-group { --bs-list-group-active-bg: var(--bs-primary); --bs-list-group-active-border-color: var(--bs-primary); }
.dropdown-menu { --bs-dropdown-link-active-bg: var(--bs-primary); border-radius: .875rem; box-shadow: var(--wdw-shadow-sm); }
.accordion { --bs-accordion-active-bg: var(--bs-primary-bg-subtle); --bs-accordion-active-color: var(--bs-primary-text-emphasis); --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color); }
.badge { font-weight: 600; }

/* Library building blocks — use these instead of re-inventing them per snippet. */
.wdw-stage { min-height: 100vh; display: flex; align-items: center; background: var(--wdw-stage); padding-block: 3rem; }
.wdw-card { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color-translucent); border-radius: var(--wdw-radius-card); box-shadow: var(--wdw-shadow); }
.wdw-card-sm { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color-translucent); border-radius: 1rem; box-shadow: var(--wdw-shadow-sm); }
.wdw-aurora { position: relative; color: #fff; background: radial-gradient(60% 55% at 100% 0, #818cf8 0, transparent 70%), radial-gradient(65% 60% at 0 100%, #ec4899 0, transparent 65%), #1e1b4b; }
.wdw-eyebrow { display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--bs-primary); }
.wdw-heading { font-weight: 800; letter-spacing: -.02em; color: var(--bs-emphasis-color); }
.wdw-muted { color: var(--bs-secondary-color); }
.wdw-icon { width: 2.75rem; height: 2.75rem; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: .875rem; background: var(--bs-primary-bg-subtle); color: var(--bs-primary); }

/* Component */
.rv-label { width: 4.5rem; font-weight: 600; }
.rv-count { width: 2rem; }
.vote-btn { --bs-btn-color: var(--bs-body-color); --bs-btn-border-color: var(--bs-secondary-color); --bs-btn-hover-bg: var(--bs-tertiary-bg); --bs-btn-hover-color: var(--bs-emphasis-color); --bs-btn-hover-border-color: var(--bs-emphasis-color); border: 1px solid var(--bs-secondary-color); color: var(--bs-body-color); background: transparent; }
.vote-btn:hover { background: var(--bs-tertiary-bg); color: var(--bs-emphasis-color); }
.vote-btn[aria-pressed="true"] { background: var(--bs-primary-bg-subtle); border-color: var(--bs-primary); color: var(--bs-primary-text-emphasis); font-weight: 700; }
.wdw-stage > .container { min-width: 0; }

function initReviewVotes() {
  const buttons = document.querySelectorAll('.vote');
  if (!buttons.length) return;
  buttons.forEach((btn) => btn.addEventListener('click', () => {
    const pressed = btn.getAttribute('aria-pressed') === 'true';
    buttons.forEach((b) => {
      if (b.getAttribute('aria-pressed') === 'true') {
        b.setAttribute('aria-pressed', 'false');
        b.querySelector('.vote-n').textContent = Number(b.querySelector('.vote-n').textContent) - 1;
      }
    });
    if (!pressed) {
      btn.setAttribute('aria-pressed', 'true');
      btn.querySelector('.vote-n').textContent = Number(btn.querySelector('.vote-n').textContent) + 1;
    }
  }));
}
initReviewVotes();