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.

Disaster response
Clean water
Animal rescue
Volunteer programs

<ul class="list-group" style="max-width: 360px;">
  <li class="list-group-item">Disaster response</li>
  <li class="list-group-item">Clean water</li>
  <li class="list-group-item">Animal rescue</li>
  <li class="list-group-item">Volunteer programs</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
Transparent reports
Volunteer network

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

5Numbered list

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

Ten ways to fundraise with friends
Feb 6, 2026
28
Our yearly impact report, explained
Jun 30, 2026
26
Why monthly giving makes such a difference
Jan 22, 2026
22

<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">Ten ways to fundraise with friends</div><span class="small text-body-secondary">Feb 6, 2026</span></div><span class="badge text-bg-primary rounded-pill">28</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">Our yearly impact report, explained</div><span class="small text-body-secondary">Jun 30, 2026</span></div><span class="badge text-bg-primary rounded-pill">26</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">Why monthly giving makes such a difference</div><span class="small text-body-secondary">Jan 22, 2026</span></div><span class="badge text-bg-primary rounded-pill">22</span></li>
</ol>

6Horizontal list

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

81.8k
Visitors
566
Sign-ups
21%
Conversion

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

Projects16
Tasks32
Issues5

<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">16</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">32</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">5</span></li>
</ul>

9Custom content

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

A beginner's guide to getting started

22 hours ago

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

Lucas Harlow

How to choose the right campaign

just now

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

Maya Delgado

What happens after a disaster appeal

yesterday

Our annual report is independently audited and published in full.

Ethan Kowalski

<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">A beginner&#39;s guide to getting started</h6>
    <small>22 hours ago</small>
  </div>
  <p class="mb-1 small">Volunteers give their time in schools, shelters and food banks every week.</p>
  <small class="">Lucas Harlow</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>just now</small>
  </div>
  <p class="mb-1 small">Clean water wells are built with and maintained by local communities.</p>
  <small class="text-body-secondary">Maya Delgado</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>yesterday</small>
  </div>
  <p class="mb-1 small">Our annual report is independently audited and published in full.</p>
  <small class="text-body-secondary">Ethan Kowalski</small></a>
</div>

10Checkbox list

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

Calm launch bright
Friendly project elegant
Powerful goal smart
Bright story 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">Calm launch bright</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">Friendly project elegant</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">Powerful goal smart</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">Bright story 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

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

Two-step verification is on.

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

<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">We measure success by how many donors come back and tell their friends.</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">Our team has done this many times, so you never have to guess.</p>
      </div>
    </div>
  </div>
</div>

13Notification list

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

Finn Larsenjust now

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

Felix Novak1 days ago

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

Jonah Rossi4 hours ago

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

<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-12.svg" alt="Finn Larsen" 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">Finn Larsen</strong><small class="text-body-secondary text-nowrap ms-2">just now</small>
    </div>
    <div class="small text-body-secondary">
      Every detail is handled by people who care about getting it right.
    </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-9.svg" alt="Felix 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">Felix Novak</strong><small class="text-body-secondary text-nowrap ms-2">1 days ago</small>
    </div>
    <div class="small text-body-secondary">
      Clean water wells are built with and maintained by local communities.
    </div>
  </div>
  </a><a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3"><img src="../assets/img/avatar-5.svg" alt="Jonah Rossi" 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">Jonah Rossi</strong><small class="text-body-secondary text-nowrap ms-2">4 hours ago</small>
    </div>
    <div class="small text-body-secondary">
      A school kit costs less than a cinema ticket and lasts a whole year.
    </div>
  </div>
  </a>
</div>

14File list

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

meet-the-partners-behind-our-water-projects.pdf
803 KB · May 20, 2026
inside-the-shelter-from-rescue-to-new-home.png
639 KB · Apr 4, 2026
looking-back-at-a-busy-season.xlsx
106 KB · Nov 27, 2025
how-your-donations-built-three-new-classrooms.zip
474 KB · Jul 9, 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">meet-the-partners-behind-our-water-projects.pdf</div><div class="small text-body-secondary">803 KB &middot; May 20, 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">inside-the-shelter-from-rescue-to-new-home.png</div><div class="small text-body-secondary">639 KB &middot; Apr 4, 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" aria-hidden="true"></i></span><div class="flex-grow-1 text-truncate"><div class="small fw-semibold text-truncate">looking-back-at-a-busy-season.xlsx</div><div class="small text-body-secondary">106 KB &middot; Nov 27, 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" aria-hidden="true"></i></span><div class="flex-grow-1 text-truncate"><div class="small fw-semibold text-truncate">how-your-donations-built-three-new-classrooms.zip</div><div class="small text-body-secondary">474 KB &middot; Jul 9, 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.

Sofia Okafor
Sales Executive
Liam Carter
Content Writer
Kenji Whitaker
Operations 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-3.svg" alt="Sofia Okafor" class="rounded-circle flex-shrink-0" width="40" height="40"><div class="flex-grow-1"><div class="fw-semibold small">Sofia Okafor</div><div class="small text-body-secondary">Sales Executive</div></div><div class="btn-group btn-group-sm" role="group" aria-label="Contact Sofia"><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-10.svg" alt="Liam Carter" class="rounded-circle flex-shrink-0" width="40" height="40"><div class="flex-grow-1"><div class="fw-semibold small">Liam Carter</div><div class="small text-body-secondary">Content Writer</div></div><div class="btn-group btn-group-sm" role="group" aria-label="Contact Liam"><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="Kenji Whitaker" class="rounded-circle flex-shrink-0" width="40" height="40"><div class="flex-grow-1"><div class="fw-semibold small">Kenji Whitaker</div><div class="small text-body-secondary">Operations Manager</div></div><div class="btn-group btn-group-sm" role="group" aria-label="Contact Kenji"><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.

Clear experience100%
Honest story43%
Practical workflow34%

<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">Clear experience</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">Honest story</span><span class="text-body-secondary">43%</span></div><div class="progress" role="progressbar" aria-label="Task progress" aria-valuenow="43" aria-valuemin="0" aria-valuemax="100" style="height: 6px;"><div class="progress-bar bg-warning" style="width: 43%;"></div></div></li>
  <li class="list-group-item"><div class="d-flex justify-content-between small mb-1"><span class="fw-semibold">Practical workflow</span><span class="text-body-secondary">34%</span></div><div class="progress" role="progressbar" aria-label="Task progress" aria-valuenow="34" aria-valuemin="0" aria-valuemax="100" style="height: 6px;"><div class="progress-bar bg-warning" style="width: 34%;"></div></div></li>
</ul>

18Inbox list

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

Theo Duarte07:30

Looking back at a busy season

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

Diego Alvarez10:45

The small habits that make a big difference

Leave a gift in your will and help future generations.

Mateo Kim10:45

What happens after a disaster appeal

Our annual report is independently audited and published in full.

Leo Silva12:00

Our favourite tips for busy weeks

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

<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">Theo Duarte</span><small class="text-body-secondary ms-2 text-nowrap">07:30</small>
    </div>
    <div class="small text-truncate fw-semibold">
      Looking back at a busy season
    </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" aria-hidden="true"></i></span>
  <div class="flex-grow-1 text-truncate">
    <div class="d-flex justify-content-between">
      <span class="fw-bold">Diego Alvarez</span><small class="text-body-secondary ms-2 text-nowrap">10:45</small>
    </div>
    <div class="small text-truncate fw-semibold">
      The small habits that make a big difference
    </div>
    <div class="small text-body-secondary text-truncate">
      Leave a gift in your will and help future generations.
    </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="">Mateo Kim</span><small class="text-body-secondary ms-2 text-nowrap">10:45</small>
    </div>
    <div class="small text-truncate text-body-secondary">
      What happens after a disaster appeal
    </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" aria-hidden="true"></i></span>
  <div class="flex-grow-1 text-truncate">
    <div class="d-flex justify-content-between">
      <span class="">Leo Silva</span><small class="text-body-secondary ms-2 text-nowrap">12: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">
      We have helped more than two hundred thousand people since we started.
    </div>
  </div>
  </a>
</div>

19Leaderboard

Ranked people with medal badges, avatars and scores.

1Luna Hughes1116 pts
2Ella Quinn774 pts
3Nadia Varga576 pts
4Ravi Mensah220 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-10.svg" alt="Luna Hughes" class="rounded-circle flex-shrink-0" width="36" height="36"><span class="flex-grow-1 small fw-semibold">Luna Hughes</span><span class="small">1116 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-6.svg" alt="Ella Quinn" class="rounded-circle flex-shrink-0" width="36" height="36"><span class="flex-grow-1 small fw-semibold">Ella Quinn</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-4.svg" alt="Nadia Varga" class="rounded-circle flex-shrink-0" width="36" height="36"><span class="flex-grow-1 small fw-semibold">Nadia Varga</span><span class="small">576 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="Ravi Mensah" class="rounded-circle flex-shrink-0" width="36" height="36"><span class="flex-grow-1 small fw-semibold">Ravi Mensah</span><span class="small">220 pts</span></li>
</ol>

20Reorderable list look

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

Tax receipts1
Local partners2
Impact tracking3
Transparent reports4

<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">Tax receipts</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">Impact tracking</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">Transparent reports</span><span class="badge bg-body-secondary text-body-secondary">4</span></li>
</ul>