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.

Recovery spa
Personal training
Yoga
Online coaching

<ul class="list-group" style="max-width: 360px;">
  <li class="list-group-item">Recovery spa</li>
  <li class="list-group-item">Personal training</li>
  <li class="list-group-item">Yoga</li>
  <li class="list-group-item">Online coaching</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.

Progress tracking
Modern equipment
Community events

<ul class="list-group list-group-flush border-top border-bottom">
  <li class="list-group-item">Progress tracking</li>
  <li class="list-group-item">Modern equipment</li>
  <li class="list-group-item">Community events</li>
</ul>

5Numbered list

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

8 lessons from our idea
Jun 5, 2026
3
The smart project checklist
Apr 13, 2026
26
Journey notes for members
Aug 5, 2026
1

<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">8 lessons from our idea</div><span class="small text-body-secondary">Jun 5, 2026</span></div><span class="badge text-bg-primary rounded-pill">3</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 smart project checklist</div><span class="small text-body-secondary">Apr 13, 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">Journey notes for members</div><span class="small text-body-secondary">Aug 5, 2026</span></div><span class="badge text-bg-primary rounded-pill">1</span></li>
</ol>

6Horizontal list

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

77.8k
Visitors
170
Sign-ups
33%
Conversion

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

Projects12
Tasks32
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">12</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">9</span></li>
</ul>

9Custom content

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

The flexible release checklist

34 min ago

Our group classes brings you focused on what matters on any device.

Aria Ashford

The smart story checklist

yesterday

Our group classes helps results you can measure for teams of every size.

Nadia Alvarez

8 lessons from our release

yesterday

A modern plan connects the whole team on the same page all year round.

Mateo Alvarez

<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">The flexible release checklist</h6>
    <small>34 min ago</small>
  </div>
  <p class="mb-1 small">Our group classes brings you focused on what matters on any device.</p>
  <small class="">Aria Ashford</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">The smart story checklist</h6>
    <small>yesterday</small>
  </div>
  <p class="mb-1 small">Our group classes helps results you can measure for teams of every size.</p>
  <small class="text-body-secondary">Nadia Alvarez</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">8 lessons from our release</h6>
    <small>yesterday</small>
  </div>
  <p class="mb-1 small">A modern plan connects the whole team on the same page all year round.</p>
  <small class="text-body-secondary">Mateo Alvarez</small></a>
</div>

10Checkbox list

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

Friendly journey smart
Fast workflow bright
Practical routine powerful
Smart routine bright

<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 journey 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">Fast workflow 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">Practical routine 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 routine bright</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

A calm dashboard makes the whole team on the same page from the very first day.

Two-step verification is on.

This modern plan guides you focused on what matters wherever you are.

<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">A calm dashboard makes the whole team on the same page from the very first day.</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">This modern plan guides you focused on what matters wherever you are.</p>
      </div>
    </div>
  </div>
</div>

13Notification list

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

Noah Quinn15 min ago

The new progress tracking makes every detail in view without the usual hassle.

Owen Okafor42 min ago

A focused process lets data easy to understand all year round.

Sofia Hughesjust now

Our recovery spa turns your work organised with friendly support.

<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-7.svg" alt="Noah Quinn" 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">Noah Quinn</strong><small class="text-body-secondary text-nowrap ms-2">15 min ago</small>
    </div>
    <div class="small text-body-secondary">
      The new progress tracking makes every detail in view without the usual hassle.
    </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-5.svg" alt="Owen 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">Owen Okafor</strong><small class="text-body-secondary text-nowrap ms-2">42 min ago</small>
    </div>
    <div class="small text-body-secondary">
      A focused process lets data easy to understand all year round.
    </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="Sofia Hughes" 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">Sofia Hughes</strong><small class="text-body-secondary text-nowrap ms-2">just now</small>
    </div>
    <div class="small text-body-secondary">
      Our recovery spa turns your work organised with friendly support.
    </div>
  </div>
  </a>
</div>

14File list

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

what-s-new-in-recovery.pdf
803 KB · Nov 3, 2025
what-s-new-in-recovery.png
212 KB · Feb 12, 2026
the-flexible-dashboard-checklist.xlsx
739 KB · Oct 3, 2026
how-we-rebuilt-our-community.zip
769 KB · Dec 29, 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" aria-hidden="true"></i></span><div class="flex-grow-1 text-truncate"><div class="small fw-semibold text-truncate">what-s-new-in-recovery.pdf</div><div class="small text-body-secondary">803 KB &middot; Nov 3, 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-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">what-s-new-in-recovery.png</div><div class="small text-body-secondary">212 KB &middot; Feb 12, 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">the-flexible-dashboard-checklist.xlsx</div><div class="small text-body-secondary">739 KB &middot; Oct 3, 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">how-we-rebuilt-our-community.zip</div><div class="small text-body-secondary">769 KB &middot; Dec 29, 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.

Isla Rossi
Backend Engineer
Aria Haddad
HR Partner
Liam Ibrahim
Backend 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-4.svg" alt="Isla Rossi" class="rounded-circle flex-shrink-0" width="40" height="40"><div class="flex-grow-1"><div class="fw-semibold small">Isla Rossi</div><div class="small text-body-secondary">Backend Engineer</div></div><div class="btn-group btn-group-sm" role="group" aria-label="Contact Isla"><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-1.svg" alt="Aria Haddad" class="rounded-circle flex-shrink-0" width="40" height="40"><div class="flex-grow-1"><div class="fw-semibold small">Aria Haddad</div><div class="small text-body-secondary">HR Partner</div></div><div class="btn-group btn-group-sm" role="group" aria-label="Contact Aria"><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-5.svg" alt="Liam Ibrahim" class="rounded-circle flex-shrink-0" width="40" height="40"><div class="flex-grow-1"><div class="fw-semibold small">Liam Ibrahim</div><div class="small text-body-secondary">Backend Engineer</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>
</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.

Reliable team100%
Fast process24%
Elegant release79%

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

18Inbox list

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

Diego Nguyen07:45

How we rebuilt our update

The new community events lets you focused on what matters all year round.

Hana Lindqvist16:30

Focused ways to improve your launch

This smart launch turns new ideas to life on any device.

Ella Kowalski07:15

What's new in strength

Our group classes connects decisions quicker and clearer from the very first day.

Noah Alvarez15:15

The practical community checklist

The new flexible plans makes decisions quicker and clearer for teams of every size.

<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">Diego Nguyen</span><small class="text-body-secondary ms-2 text-nowrap">07:45</small>
    </div>
    <div class="small text-truncate fw-semibold">
      How we rebuilt our update
    </div>
    <div class="small text-body-secondary text-truncate">
      The new community events lets you focused on what matters all year round.
    </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">Hana Lindqvist</span><small class="text-body-secondary ms-2 text-nowrap">16:30</small>
    </div>
    <div class="small text-truncate fw-semibold">
      Focused ways to improve your launch
    </div>
    <div class="small text-body-secondary text-truncate">
      This smart launch turns new ideas to life on any device.
    </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="">Ella Kowalski</span><small class="text-body-secondary ms-2 text-nowrap">07:15</small>
    </div>
    <div class="small text-truncate text-body-secondary">
      What&#39;s new in strength
    </div>
    <div class="small text-body-secondary text-truncate">
      Our group classes connects decisions quicker and clearer from the very first day.
    </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="">Noah Alvarez</span><small class="text-body-secondary ms-2 text-nowrap">15:15</small>
    </div>
    <div class="small text-truncate text-body-secondary">
      The practical community checklist
    </div>
    <div class="small text-body-secondary text-truncate">
      The new flexible plans makes decisions quicker and clearer for teams of every size.
    </div>
  </div>
  </a>
</div>

19Leaderboard

Ranked people with medal badges, avatars and scores.

1Leo Ashford892 pts
2Ivy Hughes819 pts
3Finn Alvarez462 pts
4Nora Okafor277 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-3.svg" alt="Leo Ashford" class="rounded-circle flex-shrink-0" width="36" height="36"><span class="flex-grow-1 small fw-semibold">Leo Ashford</span><span class="small">892 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-11.svg" alt="Ivy Hughes" class="rounded-circle flex-shrink-0" width="36" height="36"><span class="flex-grow-1 small fw-semibold">Ivy Hughes</span><span class="small">819 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-12.svg" alt="Finn Alvarez" class="rounded-circle flex-shrink-0" width="36" height="36"><span class="flex-grow-1 small fw-semibold">Finn Alvarez</span><span class="small">462 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="Nora Okafor" class="rounded-circle flex-shrink-0" width="36" height="36"><span class="flex-grow-1 small fw-semibold">Nora Okafor</span><span class="small">277 pts</span></li>
</ol>

20Reorderable list look

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

Progress tracking1
Open 24/72
Community events3
Modern equipment4

<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">Progress tracking</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">Open 24/7</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">Community events</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">Modern equipment</span><span class="badge bg-body-secondary text-body-secondary">4</span></li>
</ul>