List Group

List groups display a series of items: plain lists, menus of links, option pickers, inboxes and settings screens. Make items actionable, colour or number them, lay them out horizontally, or switch content panes with data-ui-toggle="list".

1Basic list

An unordered list with .list-group and .list-group-item.

Volunteer programs
Food relief
Animal rescue
Disaster response

<ul class="list-group" style="max-width: 360px;">
  <li class="list-group-item">Volunteer programs</li>
  <li class="list-group-item">Food relief</li>
  <li class="list-group-item">Animal rescue</li>
  <li class="list-group-item">Disaster response</li>
</ul>

2Active and disabled

Highlight the current item and dim unavailable ones.

Current plan
Upgrade options
Enterprise (contact sales)
Billing history

<ul class="list-group" style="max-width: 360px;">
  <li class="list-group-item active" aria-current="true">Current plan</li>
  <li class="list-group-item">Upgrade options</li>
  <li class="list-group-item disabled" aria-disabled="true">Enterprise (contact sales)</li>
  <li class="list-group-item">Billing history</li>
</ul>

3Links and buttons

list-group-item-action adds hover and focus states to links and buttons.

Overview Members

<div class="list-group" style="max-width: 360px;">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">Overview</a><a href="#" class="list-group-item list-group-item-action">Members</a>
  <button type="button" class="list-group-item list-group-item-action">Integrations</button>
  <button type="button" class="list-group-item list-group-item-action" disabled>Audit log</button>
</div>

4Flush list

list-group-flush removes outer borders so the list sits flush in a parent.

Impact tracking
Transparent reports
Secure giving

<ul class="list-group list-group-flush border-top border-bottom">
  <li class="list-group-item">Impact tracking</li>
  <li class="list-group-item">Transparent reports</li>
  <li class="list-group-item">Secure giving</li>
</ul>

5Numbered list

list-group-numbered on an ol adds counters, here with extra content per item.

The small habits that make a big difference
Oct 6, 2026
14
A beginner's guide to getting started
Sep 12, 2026
23
Meet the partners behind our water projects
Apr 2, 2026
15

<ol class="list-group list-group-numbered" style="max-width: 420px;">
  <li class="list-group-item d-flex justify-content-between align-items-start"><div class="ms-2 me-auto"><div class="fw-semibold">The small habits that make a big difference</div><span class="small text-body-secondary">Oct 6, 2026</span></div><span class="badge text-bg-primary rounded-pill">14</span></li>
  <li class="list-group-item d-flex justify-content-between align-items-start"><div class="ms-2 me-auto"><div class="fw-semibold">A beginner&#39;s guide to getting started</div><span class="small text-body-secondary">Sep 12, 2026</span></div><span class="badge text-bg-primary rounded-pill">23</span></li>
  <li class="list-group-item d-flex justify-content-between align-items-start"><div class="ms-2 me-auto"><div class="fw-semibold">Meet the partners behind our water projects</div><span class="small text-body-secondary">Apr 2, 2026</span></div><span class="badge text-bg-primary rounded-pill">15</span></li>
</ol>

6Horizontal list

list-group-horizontal lays items in a row; -md makes it responsive.

7.6k
Visitors
206
Sign-ups
93%
Conversion

<ul class="list-group list-group-horizontal-md">
  <li class="list-group-item flex-fill text-center"><div class="fw-bold">7.6k</div><small class="text-body-secondary">Visitors</small></li>
  <li class="list-group-item flex-fill text-center"><div class="fw-bold">206</div><small class="text-body-secondary">Sign-ups</small></li>
  <li class="list-group-item flex-fill text-center"><div class="fw-bold">93%</div><small class="text-body-secondary">Conversion</small></li>
</ul>

7Contextual colours

list-group-item-* colours individual items.

Primary item Secondary item Success item Danger item Warning item Info item Light item Dark item

<div class="list-group" style="max-width: 360px;">
  <a href="#" class="list-group-item list-group-item-action list-group-item-primary">Primary item</a><a href="#" class="list-group-item list-group-item-action list-group-item-secondary">Secondary item</a><a href="#" class="list-group-item list-group-item-action list-group-item-success">Success item</a><a href="#" class="list-group-item list-group-item-action list-group-item-danger">Danger item</a><a href="#" class="list-group-item list-group-item-action list-group-item-warning">Warning item</a><a href="#" class="list-group-item list-group-item-action list-group-item-info">Info item</a><a href="#" class="list-group-item list-group-item-action list-group-item-light">Light item</a><a href="#" class="list-group-item list-group-item-action list-group-item-dark">Dark item</a>
</div>

8With badges

Pill badges at the end of each item show counts.

Projects21
Tasks62
Issues9

<ul class="list-group" style="max-width: 360px;">
  <li class="list-group-item d-flex justify-content-between align-items-center"><span><i class="bi bi-folder" aria-hidden="true"></i> Projects</span><span class="badge text-bg-primary rounded-pill">21</span></li>
  <li class="list-group-item d-flex justify-content-between align-items-center"><span><i class="bi bi-check2-square" aria-hidden="true"></i> Tasks</span><span class="badge text-bg-success rounded-pill">62</span></li>
  <li class="list-group-item d-flex justify-content-between align-items-center"><span><i class="bi bi-exclamation-circle" aria-hidden="true"></i> Issues</span><span class="badge text-bg-danger rounded-pill">9</span></li>
</ul>

9Custom content

Headings, text and meta inside each item, like a list of articles.

Stories from the families we support

just now

Local partners know their communities and make sure help arrives where it matters.

Zoe Brennan

How to choose the right campaign

23 hours ago

Companies can match employee donations and double their impact.

Kai Fischer

What happens after a disaster appeal

23 hours ago

Clean water wells are built with and maintained by local communities.

Omar Mensah

<div class="list-group" style="max-width: 520px;">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
  <div class="d-flex w-100 justify-content-between">
    <h6 class="mb-1">Stories from the families we support</h6>
    <small>just now</small>
  </div>
  <p class="mb-1 small">Local partners know their communities and make sure help arrives where it matters.</p>
  <small class="">Zoe Brennan</small></a><a href="#" class="list-group-item list-group-item-action">
  <div class="d-flex w-100 justify-content-between">
    <h6 class="mb-1">How to choose the right campaign</h6>
    <small>23 hours ago</small>
  </div>
  <p class="mb-1 small">Companies can match employee donations and double their impact.</p>
  <small class="text-body-secondary">Kai Fischer</small></a><a href="#" class="list-group-item list-group-item-action">
  <div class="d-flex w-100 justify-content-between">
    <h6 class="mb-1">What happens after a disaster appeal</h6>
    <small>23 hours ago</small>
  </div>
  <p class="mb-1 small">Clean water wells are built with and maintained by local communities.</p>
  <small class="text-body-secondary">Omar Mensah</small></a>
</div>

10Checkbox list

Checkboxes and labels in items make a simple to-do list.

Friendly update smart
Modern idea bright
Elegant release focused
Clear process reliable

<ul class="list-group" style="max-width: 360px;">
  <li class="list-group-item"><input class="form-check-input me-2" type="checkbox" id="lg-chk-982" checked><label class="form-check-label text-decoration-line-through text-body-secondary" for="lg-chk-982">Friendly update smart</label></li>
  <li class="list-group-item"><input class="form-check-input me-2" type="checkbox" id="lg-chk-983" checked><label class="form-check-label text-decoration-line-through text-body-secondary" for="lg-chk-983">Modern idea bright</label></li>
  <li class="list-group-item"><input class="form-check-input me-2" type="checkbox" id="lg-chk-984"><label class="form-check-label" for="lg-chk-984">Elegant release focused</label></li>
  <li class="list-group-item"><input class="form-check-input me-2" type="checkbox" id="lg-chk-985"><label class="form-check-label" for="lg-chk-985">Clear process reliable</label></li>
</ul>

11Radio option list

Whole list items as labels for radio buttons, e.g. a plan picker.

Starter$9 / monthTeam$29 / monthBusiness$79 / month

<div class="list-group" style="max-width: 420px;">
  <label class="list-group-item d-flex gap-3" for="lg-radio-opt-987"><input class="form-check-input flex-shrink-0" type="radio" name="lg-radio-986" id="lg-radio-opt-987"><span><span class="d-block fw-semibold">Starter</span><small class="text-body-secondary">$9 / month</small></span></label>
  <label class="list-group-item d-flex gap-3" for="lg-radio-opt-988"><input class="form-check-input flex-shrink-0" type="radio" name="lg-radio-986" id="lg-radio-opt-988" checked><span><span class="d-block fw-semibold">Team</span><small class="text-body-secondary">$29 / month</small></span></label>
  <label class="list-group-item d-flex gap-3" for="lg-radio-opt-989"><input class="form-check-input flex-shrink-0" type="radio" name="lg-radio-986" id="lg-radio-opt-989"><span><span class="d-block fw-semibold">Business</span><small class="text-body-secondary">$79 / month</small></span></label>
</div>

12List as tabs

data-ui-toggle="list" turns the list into tab navigation for panes next to it.

Profile Security Notifications

Our team has done this many times, so you never have to guess.

Two-step verification is on.

Leave a gift in your will and help future generations.

<div class="row g-3">
  <div class="col-sm-4">
    <div class="list-group" role="tablist">
      <a class="list-group-item list-group-item-action active" id="lg-tab-990-tab" data-ui-toggle="list" href="#lg-tab-990" role="tab" aria-controls="lg-tab-990" aria-selected="true">Profile</a><a class="list-group-item list-group-item-action" id="lg-tab-991-tab" data-ui-toggle="list" href="#lg-tab-991" role="tab" aria-controls="lg-tab-991" aria-selected="false">Security</a><a class="list-group-item list-group-item-action" id="lg-tab-992-tab" data-ui-toggle="list" href="#lg-tab-992" role="tab" aria-controls="lg-tab-992" aria-selected="false">Notifications</a>
    </div>
  </div>
  <div class="col-sm-8">
    <div class="tab-content border rounded p-3 h-100">
      <div class="tab-pane fade show active" id="lg-tab-990" role="tabpanel" aria-labelledby="lg-tab-990-tab">
        <p class="mb-0">Our team has done this many times, so you never have to guess.</p>
      </div>
      <div class="tab-pane fade" id="lg-tab-991" role="tabpanel" aria-labelledby="lg-tab-991-tab">
        <p class="mb-0"><i class="bi bi-shield-lock" aria-hidden="true"></i> Two-step verification is on.</p>
      </div>
      <div class="tab-pane fade" id="lg-tab-992" role="tabpanel" aria-labelledby="lg-tab-992-tab">
        <p class="mb-0">Leave a gift in your will and help future generations.</p>
      </div>
    </div>
  </div>
</div>

13Notification list

Avatars, message and time, with a dot for unread items.

Diego Okaforyesterday

Thousands of donors already trust us, and we work hard to keep it that way.

Theo Pateljust now

Volunteers give their time in schools, shelters and food banks every week.

Kenji Novakyesterday

Every donation is tax-deductible, and receipts arrive by email instantly.

<div class="list-group" style="max-width: 440px;">
  <a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3"><img src="../assets/img/avatar-4.svg" alt="Diego Okafor" class="rounded-circle flex-shrink-0" width="40" height="40">
  <div class="flex-grow-1">
    <div class="d-flex justify-content-between">
      <strong class="small">Diego Okafor</strong><small class="text-body-secondary text-nowrap ms-2">yesterday</small>
    </div>
    <div class="small text-body-secondary">
      Thousands of donors already trust us, and we work hard to keep it that way.
    </div>
  </div>
  <span class="p-1 bg-primary rounded-circle align-self-center"><span class="visually-hidden">Unread</span></span></a><a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3"><img src="../assets/img/avatar-10.svg" alt="Theo Patel" class="rounded-circle flex-shrink-0" width="40" height="40">
  <div class="flex-grow-1">
    <div class="d-flex justify-content-between">
      <strong class="small">Theo Patel</strong><small class="text-body-secondary text-nowrap ms-2">just now</small>
    </div>
    <div class="small text-body-secondary">
      Volunteers give their time in schools, shelters and food banks every week.
    </div>
  </div>
  </a><a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3"><img src="../assets/img/avatar-1.svg" alt="Kenji Novak" class="rounded-circle flex-shrink-0" width="40" height="40">
  <div class="flex-grow-1">
    <div class="d-flex justify-content-between">
      <strong class="small">Kenji Novak</strong><small class="text-body-secondary text-nowrap ms-2">yesterday</small>
    </div>
    <div class="small text-body-secondary">
      Every donation is tax-deductible, and receipts arrive by email instantly.
    </div>
  </div>
  </a>
</div>

14File list

File type icons, sizes and a download button per file.

why-monthly-giving-makes-such-a-difference.pdf
579 KB · Apr 10, 2026
a-day-in-the-life-of-a-volunteer.png
771 KB · Sep 19, 2025
five-things-we-learned-this-year.xlsx
583 KB · Jan 7, 2026
stories-from-the-families-we-support.zip
763 KB · Mar 2, 2026

<ul class="list-group" style="max-width: 480px;">
  <li class="list-group-item d-flex align-items-center gap-3"><span class="fs-4 text-danger"><i class="bi bi-file-earmark-pdf" aria-hidden="true"></i></span><div class="flex-grow-1 text-truncate"><div class="small fw-semibold text-truncate">why-monthly-giving-makes-such-a-difference.pdf</div><div class="small text-body-secondary">579 KB &middot; Apr 10, 2026</div></div><button type="button" class="btn btn-sm btn-light border" aria-label="Download"><i class="bi bi-download" aria-hidden="true"></i></button></li>
  <li class="list-group-item d-flex align-items-center gap-3"><span class="fs-4 text-success"><i class="bi bi-file-earmark-image" aria-hidden="true"></i></span><div class="flex-grow-1 text-truncate"><div class="small fw-semibold text-truncate">a-day-in-the-life-of-a-volunteer.png</div><div class="small text-body-secondary">771 KB &middot; Sep 19, 2025</div></div><button type="button" class="btn btn-sm btn-light border" aria-label="Download"><i class="bi bi-download" aria-hidden="true"></i></button></li>
  <li class="list-group-item d-flex align-items-center gap-3"><span class="fs-4 text-primary"><i class="bi bi-file-earmark-spreadsheet" aria-hidden="true"></i></span><div class="flex-grow-1 text-truncate"><div class="small fw-semibold text-truncate">five-things-we-learned-this-year.xlsx</div><div class="small text-body-secondary">583 KB &middot; Jan 7, 2026</div></div><button type="button" class="btn btn-sm btn-light border" aria-label="Download"><i class="bi bi-download" aria-hidden="true"></i></button></li>
  <li class="list-group-item d-flex align-items-center gap-3"><span class="fs-4 text-warning"><i class="bi bi-file-earmark-zip" aria-hidden="true"></i></span><div class="flex-grow-1 text-truncate"><div class="small fw-semibold text-truncate">stories-from-the-families-we-support.zip</div><div class="small text-body-secondary">763 KB &middot; Mar 2, 2026</div></div><button type="button" class="btn btn-sm btn-light border" aria-label="Download"><i class="bi bi-download" aria-hidden="true"></i></button></li>
</ul>

15Contact list

People with role and quick call and email actions.

Chloe Quinn
HR Partner
Ethan Silva
Operations Manager
Ruby Kowalski
HR Partner

<ul class="list-group" style="max-width: 480px;">
  <li class="list-group-item d-flex align-items-center gap-3"><img src="../assets/img/avatar-2.svg" alt="Chloe Quinn" class="rounded-circle flex-shrink-0" width="40" height="40"><div class="flex-grow-1"><div class="fw-semibold small">Chloe Quinn</div><div class="small text-body-secondary">HR Partner</div></div><div class="btn-group btn-group-sm" role="group" aria-label="Contact Chloe"><button type="button" class="btn btn-outline-secondary" aria-label="Call"><i class="bi bi-telephone" aria-hidden="true"></i></button><button type="button" class="btn btn-outline-secondary" aria-label="Email"><i class="bi bi-envelope" aria-hidden="true"></i></button></div></li>
  <li class="list-group-item d-flex align-items-center gap-3"><img src="../assets/img/avatar-12.svg" alt="Ethan Silva" class="rounded-circle flex-shrink-0" width="40" height="40"><div class="flex-grow-1"><div class="fw-semibold small">Ethan Silva</div><div class="small text-body-secondary">Operations Manager</div></div><div class="btn-group btn-group-sm" role="group" aria-label="Contact Ethan"><button type="button" class="btn btn-outline-secondary" aria-label="Call"><i class="bi bi-telephone" aria-hidden="true"></i></button><button type="button" class="btn btn-outline-secondary" aria-label="Email"><i class="bi bi-envelope" aria-hidden="true"></i></button></div></li>
  <li class="list-group-item d-flex align-items-center gap-3"><img src="../assets/img/avatar-7.svg" alt="Ruby Kowalski" class="rounded-circle flex-shrink-0" width="40" height="40"><div class="flex-grow-1"><div class="fw-semibold small">Ruby Kowalski</div><div class="small text-body-secondary">HR Partner</div></div><div class="btn-group btn-group-sm" role="group" aria-label="Contact Ruby"><button type="button" class="btn btn-outline-secondary" aria-label="Call"><i class="bi bi-telephone" aria-hidden="true"></i></button><button type="button" class="btn btn-outline-secondary" aria-label="Email"><i class="bi bi-envelope" aria-hidden="true"></i></button></div></li>
</ul>

16Settings with switches

Each setting has an icon, a description and a switch on the right.

Push notificationsGet alerts on your phone
Weekly digestA summary every Monday
Dark modeEasier on the eyes at night

<ul class="list-group" style="max-width: 480px;">
  <li class="list-group-item d-flex align-items-center gap-3 py-3"><span class="fs-5 text-primary"><i class="bi bi-bell" aria-hidden="true"></i></span><label class="flex-grow-1" for="lg-switch-993"><span class="d-block fw-semibold small">Push notifications</span><span class="small text-body-secondary">Get alerts on your phone</span></label><div class="form-check form-switch m-0"><input class="form-check-input" type="checkbox" role="switch" id="lg-switch-993" checked></div></li>
  <li class="list-group-item d-flex align-items-center gap-3 py-3"><span class="fs-5 text-primary"><i class="bi bi-envelope" aria-hidden="true"></i></span><label class="flex-grow-1" for="lg-switch-994"><span class="d-block fw-semibold small">Weekly digest</span><span class="small text-body-secondary">A summary every Monday</span></label><div class="form-check form-switch m-0"><input class="form-check-input" type="checkbox" role="switch" id="lg-switch-994" checked></div></li>
  <li class="list-group-item d-flex align-items-center gap-3 py-3"><span class="fs-5 text-primary"><i class="bi bi-moon" aria-hidden="true"></i></span><label class="flex-grow-1" for="lg-switch-995"><span class="d-block fw-semibold small">Dark mode</span><span class="small text-body-secondary">Easier on the eyes at night</span></label><div class="form-check form-switch m-0"><input class="form-check-input" type="checkbox" role="switch" id="lg-switch-995"></div></li>
</ul>

17Task progress list

Progress bars inside items track several jobs at once.

Simple goal100%
Clear process30%
Simple routine30%

<ul class="list-group" style="max-width: 480px;">
  <li class="list-group-item"><div class="d-flex justify-content-between small mb-1"><span class="fw-semibold">Simple goal</span><span class="text-body-secondary">100%</span></div><div class="progress" role="progressbar" aria-label="Task progress" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="height: 6px;"><div class="progress-bar bg-success" style="width: 100%;"></div></div></li>
  <li class="list-group-item"><div class="d-flex justify-content-between small mb-1"><span class="fw-semibold">Clear process</span><span class="text-body-secondary">30%</span></div><div class="progress" role="progressbar" aria-label="Task progress" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="height: 6px;"><div class="progress-bar bg-warning" style="width: 30%;"></div></div></li>
  <li class="list-group-item"><div class="d-flex justify-content-between small mb-1"><span class="fw-semibold">Simple routine</span><span class="text-body-secondary">30%</span></div><div class="progress" role="progressbar" aria-label="Task progress" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="height: 6px;"><div class="progress-bar bg-warning" style="width: 30%;"></div></div></li>
</ul>

18Inbox list

Unread messages in bold with a tinted edge; long lines are truncated.

Tariq Morgan08:30

Our yearly impact report, explained

We have helped more than two hundred thousand people since we started.

Ava Sato10:15

A beginner's guide to getting started

Clear prices, honest advice and no surprises along the way.

Mason Varga20:30

The small habits that make a big difference

We measure success by how many donors come back and tell their friends.

Arjun Whitaker14:45

Looking back at a busy season

Ninety cents of every dollar goes directly to the projects you support.

<div class="list-group" style="max-width: 560px;">
  <a href="#" class="list-group-item list-group-item-action d-flex gap-3 align-items-start ca-unread"><span class="pt-1 text-warning"><i class="bi bi-star-fill" aria-hidden="true"></i></span>
  <div class="flex-grow-1 text-truncate">
    <div class="d-flex justify-content-between">
      <span class="fw-bold">Tariq Morgan</span><small class="text-body-secondary ms-2 text-nowrap">08:30</small>
    </div>
    <div class="small text-truncate fw-semibold">
      Our yearly impact report, explained
    </div>
    <div class="small text-body-secondary text-truncate">
      We have helped more than two hundred thousand people since we started.
    </div>
  </div>
  </a><a href="#" class="list-group-item list-group-item-action d-flex gap-3 align-items-start ca-unread"><span class="pt-1 text-warning"><i class="bi bi-star" aria-hidden="true"></i></span>
  <div class="flex-grow-1 text-truncate">
    <div class="d-flex justify-content-between">
      <span class="fw-bold">Ava Sato</span><small class="text-body-secondary ms-2 text-nowrap">10:15</small>
    </div>
    <div class="small text-truncate fw-semibold">
      A beginner&#39;s guide to getting started
    </div>
    <div class="small text-body-secondary text-truncate">
      Clear prices, honest advice and no surprises along the way.
    </div>
  </div>
  </a><a href="#" class="list-group-item list-group-item-action d-flex gap-3 align-items-start"><span class="pt-1 text-warning"><i class="bi bi-star" aria-hidden="true"></i></span>
  <div class="flex-grow-1 text-truncate">
    <div class="d-flex justify-content-between">
      <span class="">Mason Varga</span><small class="text-body-secondary ms-2 text-nowrap">20:30</small>
    </div>
    <div class="small text-truncate text-body-secondary">
      The small habits that make a big difference
    </div>
    <div class="small text-body-secondary text-truncate">
      We measure success by how many donors come back and tell their friends.
    </div>
  </div>
  </a><a href="#" class="list-group-item list-group-item-action d-flex gap-3 align-items-start"><span class="pt-1 text-warning"><i class="bi bi-star" aria-hidden="true"></i></span>
  <div class="flex-grow-1 text-truncate">
    <div class="d-flex justify-content-between">
      <span class="">Arjun Whitaker</span><small class="text-body-secondary ms-2 text-nowrap">14:45</small>
    </div>
    <div class="small text-truncate text-body-secondary">
      Looking back at a busy season
    </div>
    <div class="small text-body-secondary text-truncate">
      Ninety cents of every dollar goes directly to the projects you support.
    </div>
  </div>
  </a>
</div>

19Leaderboard

Ranked people with medal badges, avatars and scores.

1Ravi Ortega928 pts
2Samir Alvarez774 pts
3Priya Duarte512 pts
4Isla Kim243 pts

<ol class="list-group" style="max-width: 420px;">
  <li class="list-group-item d-flex align-items-center gap-3"><span class="badge rounded-circle text-bg-warning ca-rank">1</span><img src="../assets/img/avatar-4.svg" alt="Ravi Ortega" class="rounded-circle flex-shrink-0" width="36" height="36"><span class="flex-grow-1 small fw-semibold">Ravi Ortega</span><span class="small">928 pts</span></li>
  <li class="list-group-item d-flex align-items-center gap-3"><span class="badge rounded-circle text-bg-secondary ca-rank">2</span><img src="../assets/img/avatar-12.svg" alt="Samir Alvarez" class="rounded-circle flex-shrink-0" width="36" height="36"><span class="flex-grow-1 small fw-semibold">Samir Alvarez</span><span class="small">774 pts</span></li>
  <li class="list-group-item d-flex align-items-center gap-3"><span class="badge rounded-circle text-bg-danger ca-rank">3</span><img src="../assets/img/avatar-10.svg" alt="Priya Duarte" class="rounded-circle flex-shrink-0" width="36" height="36"><span class="flex-grow-1 small fw-semibold">Priya Duarte</span><span class="small">512 pts</span></li>
  <li class="list-group-item d-flex align-items-center gap-3"><span class="badge rounded-circle text-bg-light ca-rank">4</span><img src="../assets/img/avatar-4.svg" alt="Isla Kim" class="rounded-circle flex-shrink-0" width="36" height="36"><span class="flex-grow-1 small fw-semibold">Isla Kim</span><span class="small">243 pts</span></li>
</ol>

20Reorderable list look

Grip handles signal that items can be reordered (wire up drag and drop in your app).

Transparent reports1
Local partners2
Secure giving3
Impact tracking4

<ul class="list-group" style="max-width: 420px;">
  <li class="list-group-item d-flex align-items-center gap-2"><span class="text-body-tertiary ca-grip" title="Drag to reorder"><i class="bi bi-grip-vertical" aria-hidden="true"></i></span><span class="flex-grow-1">Transparent reports</span><span class="badge bg-body-secondary text-body-secondary">1</span></li>
  <li class="list-group-item d-flex align-items-center gap-2"><span class="text-body-tertiary ca-grip" title="Drag to reorder"><i class="bi bi-grip-vertical" aria-hidden="true"></i></span><span class="flex-grow-1">Local partners</span><span class="badge bg-body-secondary text-body-secondary">2</span></li>
  <li class="list-group-item d-flex align-items-center gap-2"><span class="text-body-tertiary ca-grip" title="Drag to reorder"><i class="bi bi-grip-vertical" aria-hidden="true"></i></span><span class="flex-grow-1">Secure giving</span><span class="badge bg-body-secondary text-body-secondary">3</span></li>
  <li class="list-group-item d-flex align-items-center gap-2"><span class="text-body-tertiary ca-grip" title="Drag to reorder"><i class="bi bi-grip-vertical" aria-hidden="true"></i></span><span class="flex-grow-1">Impact tracking</span><span class="badge bg-body-secondary text-body-secondary">4</span></li>
</ul>