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.

Education fund
Disaster response
Animal rescue
Food relief

<ul class="list-group" style="max-width: 360px;">
  <li class="list-group-item">Education fund</li>
  <li class="list-group-item">Disaster response</li>
  <li class="list-group-item">Animal rescue</li>
  <li class="list-group-item">Food relief</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
Tax receipts
Secure giving

<ul class="list-group list-group-flush border-top border-bottom">
  <li class="list-group-item">Local partners</li>
  <li class="list-group-item">Tax receipts</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.

Five things we learned this year
Aug 16, 2026
2
The small habits that make a big difference
Aug 22, 2026
25
What our donors asked us most
Apr 28, 2026
3

<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">Five things we learned this year</div><span class="small text-body-secondary">Aug 16, 2026</span></div><span class="badge text-bg-primary rounded-pill">2</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">Aug 22, 2026</span></div><span class="badge text-bg-primary rounded-pill">25</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">What our donors asked us most</div><span class="small text-body-secondary">Apr 28, 2026</span></div><span class="badge text-bg-primary rounded-pill">3</span></li>
</ol>

6Horizontal list

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

2.8k
Visitors
502
Sign-ups
72%
Conversion

<ul class="list-group list-group-horizontal-md">
  <li class="list-group-item flex-fill text-center"><div class="fw-bold">2.8k</div><small class="text-body-secondary">Visitors</small></li>
  <li class="list-group-item flex-fill text-center"><div class="fw-bold">502</div><small class="text-body-secondary">Sign-ups</small></li>
  <li class="list-group-item flex-fill text-center"><div class="fw-bold">72%</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
Tasks50
Issues4

<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">50</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">4</span></li>
</ul>

9Custom content

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

A day in the life of a volunteer

14 hours ago

Leave a gift in your will and help future generations.

Ravi Carter

Looking back at a busy season

5 hours ago

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

Samir Rossi

How your donations built three new classrooms

yesterday

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

Aria Moreau

<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 day in the life of a volunteer</h6>
    <small>14 hours ago</small>
  </div>
  <p class="mb-1 small">Leave a gift in your will and help future generations.</p>
  <small class="">Ravi Carter</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">Looking back at a busy season</h6>
    <small>5 hours 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">Samir Rossi</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 your donations built three new classrooms</h6>
    <small>yesterday</small>
  </div>
  <p class="mb-1 small">Friendly people answer your questions quickly, by phone, chat or email.</p>
  <small class="text-body-secondary">Aria Moreau</small></a>
</div>

10Checkbox list

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

Smart launch smart
Smart workflow secure
Calm dashboard reliable
Clear process practical

<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">Smart launch 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">Smart workflow secure</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">Calm dashboard reliable</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 practical</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.

Monthly gifts let us plan ahead and respond quickly when disaster strikes.

<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-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">Monthly gifts let us plan ahead and respond quickly when disaster strikes.</p>
      </div>
    </div>
  </div>
</div>

13Notification list

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

Zoe Duarte1 days ago

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

Arjun Okafor24 min ago

Companies can match employee donations and double their impact.

Lucas Mensah30 min ago

We keep things simple, so you can focus on what matters to you.

<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-3.svg" alt="Zoe Duarte" 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">Zoe Duarte</strong><small class="text-body-secondary text-nowrap ms-2">1 days 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>
  <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-11.svg" alt="Arjun 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">Arjun Okafor</strong><small class="text-body-secondary text-nowrap ms-2">24 min ago</small>
    </div>
    <div class="small text-body-secondary">
      Companies can match employee donations and double their impact.
    </div>
  </div>
  </a><a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3"><img src="../assets/img/avatar-4.svg" alt="Lucas Mensah" 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">Lucas Mensah</strong><small class="text-body-secondary text-nowrap ms-2">30 min ago</small>
    </div>
    <div class="small text-body-secondary">
      We keep things simple, so you can focus on what matters to you.
    </div>
  </div>
  </a>
</div>

14File list

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

inside-the-shelter-from-rescue-to-new-home.pdf
124 KB · Apr 28, 2026
how-to-choose-the-right-campaign.png
599 KB · Sep 11, 2026
meet-the-partners-behind-our-water-projects.xlsx
229 KB · Nov 30, 2025
what-our-donors-asked-us-most.zip
221 KB · Jul 30, 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-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.pdf</div><div class="small text-body-secondary">124 KB &middot; Apr 28, 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">how-to-choose-the-right-campaign.png</div><div class="small text-body-secondary">599 KB &middot; Sep 11, 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">meet-the-partners-behind-our-water-projects.xlsx</div><div class="small text-body-secondary">229 KB &middot; Nov 30, 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">what-our-donors-asked-us-most.zip</div><div class="small text-body-secondary">221 KB &middot; Jul 30, 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.

Hana Whitaker
Marketing Lead
Maya Kowalski
Finance Lead
Felix Ortega
Frontend Engineer

<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="Hana Whitaker" class="rounded-circle flex-shrink-0" width="40" height="40"><div class="flex-grow-1"><div class="fw-semibold small">Hana Whitaker</div><div class="small text-body-secondary">Marketing Lead</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="Maya Kowalski" class="rounded-circle flex-shrink-0" width="40" height="40"><div class="flex-grow-1"><div class="fw-semibold small">Maya Kowalski</div><div class="small text-body-secondary">Finance Lead</div></div><div class="btn-group btn-group-sm" role="group" aria-label="Contact Maya"><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-2.svg" alt="Felix Ortega" class="rounded-circle flex-shrink-0" width="40" height="40"><div class="flex-grow-1"><div class="fw-semibold small">Felix Ortega</div><div class="small text-body-secondary">Frontend Engineer</div></div><div class="btn-group btn-group-sm" role="group" aria-label="Contact Felix"><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.

Bright routine100%
Focused experience27%
Focused workflow25%

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

18Inbox list

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

Mia Varga16:15

Stories from the families we support

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

Omar Fischer13:00

Ten ways to fundraise with friends

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

Tariq Larsen18:30

Why we plant trees with the schools we build

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

Ava Nguyen10:30

Looking back at a busy season

Leave a gift in your will and help future generations.

<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">Mia Varga</span><small class="text-body-secondary ms-2 text-nowrap">16:15</small>
    </div>
    <div class="small text-truncate fw-semibold">
      Stories from the families we support
    </div>
    <div class="small text-body-secondary text-truncate">
      Ninety cents of every dollar goes directly to the projects you support.
    </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">Omar Fischer</span><small class="text-body-secondary ms-2 text-nowrap">13:00</small>
    </div>
    <div class="small text-truncate fw-semibold">
      Ten ways to fundraise with friends
    </div>
    <div class="small text-body-secondary text-truncate">
      Friendly people answer your questions quickly, by phone, chat or email.
    </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="">Tariq Larsen</span><small class="text-body-secondary ms-2 text-nowrap">18:30</small>
    </div>
    <div class="small text-truncate text-body-secondary">
      Why we plant trees with the schools we build
    </div>
    <div class="small text-body-secondary text-truncate">
      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 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="">Ava Nguyen</span><small class="text-body-secondary ms-2 text-nowrap">10:30</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">
      Leave a gift in your will and help future generations.
    </div>
  </div>
  </a>
</div>

19Leaderboard

Ranked people with medal badges, avatars and scores.

1Nora Harlow1160 pts
2Diego Brennan666 pts
3Kenji Ibrahim586 pts
4Sofia Quinn266 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-5.svg" alt="Nora Harlow" class="rounded-circle flex-shrink-0" width="36" height="36"><span class="flex-grow-1 small fw-semibold">Nora Harlow</span><span class="small">1160 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-9.svg" alt="Diego Brennan" class="rounded-circle flex-shrink-0" width="36" height="36"><span class="flex-grow-1 small fw-semibold">Diego Brennan</span><span class="small">666 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-7.svg" alt="Kenji Ibrahim" class="rounded-circle flex-shrink-0" width="36" height="36"><span class="flex-grow-1 small fw-semibold">Kenji Ibrahim</span><span class="small">586 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-1.svg" alt="Sofia Quinn" class="rounded-circle flex-shrink-0" width="36" height="36"><span class="flex-grow-1 small fw-semibold">Sofia Quinn</span><span class="small">266 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
Transparent reports2
Secure giving3
Volunteer network4

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