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.

Food relief
Education fund
Clean water
Animal rescue

<ul class="list-group" style="max-width: 360px;">
  <li class="list-group-item">Food relief</li>
  <li class="list-group-item">Education fund</li>
  <li class="list-group-item">Clean water</li>
  <li class="list-group-item">Animal rescue</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.

Local partners
Volunteer network
Transparent reports

<ul class="list-group list-group-flush border-top border-bottom">
  <li class="list-group-item">Local partners</li>
  <li class="list-group-item">Volunteer network</li>
  <li class="list-group-item">Transparent reports</li>
</ul>

5Numbered list

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

How your donations built three new classrooms
Jan 7, 2026
15
How to choose the right campaign
Nov 13, 2025
19
The small habits that make a big difference
May 22, 2026
24

<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">How your donations built three new classrooms</div><span class="small text-body-secondary">Jan 7, 2026</span></div><span class="badge text-bg-primary rounded-pill">15</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">How to choose the right campaign</div><span class="small text-body-secondary">Nov 13, 2025</span></div><span class="badge text-bg-primary rounded-pill">19</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">The small habits that make a big difference</div><span class="small text-body-secondary">May 22, 2026</span></div><span class="badge text-bg-primary rounded-pill">24</span></li>
</ol>

6Horizontal list

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

24.9k
Visitors
506
Sign-ups
87%
Conversion

<ul class="list-group list-group-horizontal-md">
  <li class="list-group-item flex-fill text-center"><div class="fw-bold">24.9k</div><small class="text-body-secondary">Visitors</small></li>
  <li class="list-group-item flex-fill text-center"><div class="fw-bold">506</div><small class="text-body-secondary">Sign-ups</small></li>
  <li class="list-group-item flex-fill text-center"><div class="fw-bold">87%</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.

Projects19
Tasks83
Issues8

<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-fill" aria-hidden="true"></i> Projects</span><span class="badge text-bg-primary rounded-pill">19</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">83</span></li>
  <li class="list-group-item d-flex justify-content-between align-items-center"><span><i class="bi bi-exclamation-circle-fill" aria-hidden="true"></i> Issues</span><span class="badge text-bg-danger rounded-pill">8</span></li>
</ul>

9Custom content

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

Inside the shelter: from rescue to new home

19 hours ago

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

Samir Brennan

A day in the life of a volunteer

16 min ago

Start in minutes and get help from a real person whenever you need it.

Zoe Moreau

Five things we learned this year

yesterday

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

Ella Silva

<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">Inside the shelter: from rescue to new home</h6>
    <small>19 hours ago</small>
  </div>
  <p class="mb-1 small">Our team has done this many times, so you never have to guess.</p>
  <small class="">Samir 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">A day in the life of a volunteer</h6>
    <small>16 min ago</small>
  </div>
  <p class="mb-1 small">Start in minutes and get help from a real person whenever you need it.</p>
  <small class="text-body-secondary">Zoe Moreau</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">Five things we learned this year</h6>
    <small>yesterday</small>
  </div>
  <p class="mb-1 small">Local partners know their communities and make sure help arrives where it matters.</p>
  <small class="text-body-secondary">Ella Silva</small></a>
</div>

10Checkbox list

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

Honest workflow smart
Powerful community smart
Modern team powerful
Smart workflow simple

<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">Honest workflow 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">Powerful community smart</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">Modern team powerful</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">Smart workflow simple</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.

Friendly people answer your questions quickly, by phone, chat or email.

<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-fill" 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">Friendly people answer your questions quickly, by phone, chat or email.</p>
      </div>
    </div>
  </div>
</div>

13Notification list

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

Nadia Delgadojust now

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

Aria Ortega4 days ago

We listen first, then build a plan around what you actually need.

Isla Sato3 days ago

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

<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-2.svg" alt="Nadia Delgado" 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">Nadia Delgado</strong><small class="text-body-secondary text-nowrap ms-2">just now</small>
    </div>
    <div class="small text-body-secondary">
      We have helped more than two hundred thousand people since we started.
    </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="Aria Ortega" 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">Aria Ortega</strong><small class="text-body-secondary text-nowrap ms-2">4 days ago</small>
    </div>
    <div class="small text-body-secondary">
      We listen first, then build a plan around what you actually need.
    </div>
  </div>
  </a><a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3"><img src="../assets/img/avatar-11.svg" alt="Isla Sato" 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">Isla Sato</strong><small class="text-body-secondary text-nowrap ms-2">3 days ago</small>
    </div>
    <div class="small text-body-secondary">
      Local partners know their communities and make sure help arrives where it matters.
    </div>
  </div>
  </a>
</div>

14File list

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

our-favourite-tips-for-busy-weeks.pdf
287 KB · Aug 17, 2026
meet-the-partners-behind-our-water-projects.png
449 KB · May 13, 2026
why-we-plant-trees-with-the-schools-we-build.xlsx
522 KB · Oct 1, 2025
inside-the-shelter-from-rescue-to-new-home.zip
530 KB · Sep 11, 2025

<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-fill" aria-hidden="true"></i></span><div class="flex-grow-1 text-truncate"><div class="small fw-semibold text-truncate">our-favourite-tips-for-busy-weeks.pdf</div><div class="small text-body-secondary">287 KB &middot; Aug 17, 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-fill" aria-hidden="true"></i></span><div class="flex-grow-1 text-truncate"><div class="small fw-semibold text-truncate">meet-the-partners-behind-our-water-projects.png</div><div class="small text-body-secondary">449 KB &middot; May 13, 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-primary"><i class="bi bi-file-earmark-spreadsheet-fill" aria-hidden="true"></i></span><div class="flex-grow-1 text-truncate"><div class="small fw-semibold text-truncate">why-we-plant-trees-with-the-schools-we-build.xlsx</div><div class="small text-body-secondary">522 KB &middot; Oct 1, 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-warning"><i class="bi bi-file-earmark-zip-fill" aria-hidden="true"></i></span><div class="flex-grow-1 text-truncate"><div class="small fw-semibold text-truncate">inside-the-shelter-from-rescue-to-new-home.zip</div><div class="small text-body-secondary">530 KB &middot; Sep 11, 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>
</ul>

15Contact list

People with role and quick call and email actions.

Nora Kim
Backend Engineer
Hana Patel
Art Director
Mason Duarte
Project Manager

<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-10.svg" alt="Nora Kim" class="rounded-circle flex-shrink-0" width="40" height="40"><div class="flex-grow-1"><div class="fw-semibold small">Nora Kim</div><div class="small text-body-secondary">Backend Engineer</div></div><div class="btn-group btn-group-sm" role="group" aria-label="Contact Nora"><button type="button" class="btn btn-outline-secondary" aria-label="Call"><i class="bi bi-telephone-fill" aria-hidden="true"></i></button><button type="button" class="btn btn-outline-secondary" aria-label="Email"><i class="bi bi-envelope-fill" 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="Hana Patel" class="rounded-circle flex-shrink-0" width="40" height="40"><div class="flex-grow-1"><div class="fw-semibold small">Hana Patel</div><div class="small text-body-secondary">Art Director</div></div><div class="btn-group btn-group-sm" role="group" aria-label="Contact Hana"><button type="button" class="btn btn-outline-secondary" aria-label="Call"><i class="bi bi-telephone-fill" aria-hidden="true"></i></button><button type="button" class="btn btn-outline-secondary" aria-label="Email"><i class="bi bi-envelope-fill" 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="Mason Duarte" class="rounded-circle flex-shrink-0" width="40" height="40"><div class="flex-grow-1"><div class="fw-semibold small">Mason Duarte</div><div class="small text-body-secondary">Project Manager</div></div><div class="btn-group btn-group-sm" role="group" aria-label="Contact Mason"><button type="button" class="btn btn-outline-secondary" aria-label="Call"><i class="bi bi-telephone-fill" aria-hidden="true"></i></button><button type="button" class="btn btn-outline-secondary" aria-label="Email"><i class="bi bi-envelope-fill" 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-fill" 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-fill" 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-fill" 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 story100%
Elegant update79%
Reliable goal17%

<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 story</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">Elegant update</span><span class="text-body-secondary">79%</span></div><div class="progress" role="progressbar" aria-label="Task progress" aria-valuenow="79" aria-valuemin="0" aria-valuemax="100" style="height: 6px;"><div class="progress-bar bg-primary" style="width: 79%;"></div></div></li>
  <li class="list-group-item"><div class="d-flex justify-content-between small mb-1"><span class="fw-semibold">Reliable goal</span><span class="text-body-secondary">17%</span></div><div class="progress" role="progressbar" aria-label="Task progress" aria-valuenow="17" aria-valuemin="0" aria-valuemax="100" style="height: 6px;"><div class="progress-bar bg-warning" style="width: 17%;"></div></div></li>
</ul>

18Inbox list

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

Luna Novak19:30

Why we plant trees with the schools we build

You receive photos and updates showing exactly what your donation achieved.

Leo Haddad09:15

How to choose the right campaign

Every detail is handled by people who care about getting it right.

Lucas Quinn20:00

Our favourite tips for busy weeks

Our annual report is independently audited and published in full.

Ivy Larsen18:00

Stories from the families we support

A school kit costs less than a cinema ticket and lasts a whole year.

<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">Luna Novak</span><small class="text-body-secondary ms-2 text-nowrap">19:30</small>
    </div>
    <div class="small text-truncate fw-semibold">
      Why we plant trees with the schools we build
    </div>
    <div class="small text-body-secondary text-truncate">
      You receive photos and updates showing exactly what your donation achieved.
    </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-fill" aria-hidden="true"></i></span>
  <div class="flex-grow-1 text-truncate">
    <div class="d-flex justify-content-between">
      <span class="fw-bold">Leo Haddad</span><small class="text-body-secondary ms-2 text-nowrap">09:15</small>
    </div>
    <div class="small text-truncate fw-semibold">
      How to choose the right campaign
    </div>
    <div class="small text-body-secondary text-truncate">
      Every detail is handled by people who care about getting it right.
    </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-fill" aria-hidden="true"></i></span>
  <div class="flex-grow-1 text-truncate">
    <div class="d-flex justify-content-between">
      <span class="">Lucas Quinn</span><small class="text-body-secondary ms-2 text-nowrap">20:00</small>
    </div>
    <div class="small text-truncate text-body-secondary">
      Our favourite tips for busy weeks
    </div>
    <div class="small text-body-secondary text-truncate">
      Our annual report is independently audited and published in full.
    </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-fill" aria-hidden="true"></i></span>
  <div class="flex-grow-1 text-truncate">
    <div class="d-flex justify-content-between">
      <span class="">Ivy Larsen</span><small class="text-body-secondary ms-2 text-nowrap">18:00</small>
    </div>
    <div class="small text-truncate text-body-secondary">
      Stories from the families we support
    </div>
    <div class="small text-body-secondary text-truncate">
      A school kit costs less than a cinema ticket and lasts a whole year.
    </div>
  </div>
  </a>
</div>

19Leaderboard

Ranked people with medal badges, avatars and scores.

1Liam Whitaker1040 pts
2Priya Fischer765 pts
3Ruby Tanaka568 pts
4Amara Nguyen211 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-12.svg" alt="Liam Whitaker" class="rounded-circle flex-shrink-0" width="36" height="36"><span class="flex-grow-1 small fw-semibold">Liam Whitaker</span><span class="small">1040 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-2.svg" alt="Priya Fischer" class="rounded-circle flex-shrink-0" width="36" height="36"><span class="flex-grow-1 small fw-semibold">Priya Fischer</span><span class="small">765 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-9.svg" alt="Ruby Tanaka" class="rounded-circle flex-shrink-0" width="36" height="36"><span class="flex-grow-1 small fw-semibold">Ruby Tanaka</span><span class="small">568 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-6.svg" alt="Amara Nguyen" class="rounded-circle flex-shrink-0" width="36" height="36"><span class="flex-grow-1 small fw-semibold">Amara Nguyen</span><span class="small">211 pts</span></li>
</ol>

20Reorderable list look

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

Secure giving1
Volunteer network2
Transparent reports3
Local partners4

<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">Secure giving</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">Volunteer network</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">Transparent reports</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">Local partners</span><span class="badge bg-body-secondary text-body-secondary">4</span></li>
</ul>