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-bs-toggle="list".

1Basic list

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

Rental management
Virtual tours
Property search
Home valuation

<ul class="list-group" style="max-width: 360px;">
  <li class="list-group-item">Rental management</li>
  <li class="list-group-item">Virtual tours</li>
  <li class="list-group-item">Property search</li>
  <li class="list-group-item">Home valuation</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.

Verified listings
3D tours
Expert agents

<ul class="list-group list-group-flush border-top border-bottom">
  <li class="list-group-item">Verified listings</li>
  <li class="list-group-item">3D tours</li>
  <li class="list-group-item">Expert agents</li>
</ul>

5Numbered list

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

The clear update checklist
Jul 12, 2026
3
Smart ways to improve your community
Dec 13, 2025
2
A guide to legal support
May 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">The clear update checklist</div><span class="small text-body-secondary">Jul 12, 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">Smart ways to improve your community</div><span class="small text-body-secondary">Dec 13, 2025</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">A guide to legal support</div><span class="small text-body-secondary">May 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.

72.6k
Visitors
445
Sign-ups
89%
Conversion

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

Projects25
Tasks74
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" aria-hidden="true"></i> Projects</span><span class="badge text-bg-primary rounded-pill">25</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">74</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">4</span></li>
</ul>

9Custom content

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

What's new in land

4 days ago

The new 3d tours connects new ideas to life without the usual hassle.

Kai Silva

How we rebuilt our process

20 hours ago

Our home valuation keeps you focused on what matters without extra tools.

Lucas Ashford

Inside the smart goal

1 days ago

Our mortgage advice gives complex tasks into simple steps with friendly support.

Ivy 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">What&#39;s new in land</h6>
    <small>4 days ago</small>
  </div>
  <p class="mb-1 small">The new 3d tours connects new ideas to life without the usual hassle.</p>
  <small class="">Kai Silva</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 we rebuilt our process</h6>
    <small>20 hours ago</small>
  </div>
  <p class="mb-1 small">Our home valuation keeps you focused on what matters without extra tools.</p>
  <small class="text-body-secondary">Lucas 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">Inside the smart goal</h6>
    <small>1 days ago</small>
  </div>
  <p class="mb-1 small">Our mortgage advice gives complex tasks into simple steps with friendly support.</p>
  <small class="text-body-secondary">Ivy Kowalski</small></a>
</div>

10Checkbox list

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

Smart plan bright
Honest story smart
Modern community smart
Reliable dashboard modern

<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 plan 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">Honest story 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 community 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">Reliable dashboard modern</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-bs-toggle="list" turns the list into tab navigation for panes next to it.

Profile Security Notifications

A powerful journey shows your work organised all year round.

Two-step verification is on.

The new 3d tours gives complex tasks into simple steps on any device.

<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-bs-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-bs-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-bs-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 powerful journey shows your work organised all year round.</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">The new 3d tours gives complex tasks into simple steps on any device.</p>
      </div>
    </div>
  </div>
</div>

13Notification list

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

Aria Ashford57 min ago

The new 3d tours connects complex tasks into simple steps on any device.

Lea Hughes11 hours ago

This friendly goal guides complex tasks into simple steps wherever you are.

Jonah Fischer2 hours ago

This flexible idea turns customers coming back on any device.

<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="Aria Ashford" 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 Ashford</strong><small class="text-body-secondary text-nowrap ms-2">57 min ago</small>
    </div>
    <div class="small text-body-secondary">
      The new 3d tours connects complex tasks into simple steps on any device.
    </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="Lea 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">Lea Hughes</strong><small class="text-body-secondary text-nowrap ms-2">11 hours ago</small>
    </div>
    <div class="small text-body-secondary">
      This friendly goal guides complex tasks into simple steps wherever you are.
    </div>
  </div>
  </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="Jonah Fischer" 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 Fischer</strong><small class="text-body-secondary text-nowrap ms-2">2 hours ago</small>
    </div>
    <div class="small text-body-secondary">
      This flexible idea turns customers coming back on any device.
    </div>
  </div>
  </a>
</div>

14File list

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

what-s-new-in-villas.pdf
28 KB · Mar 23, 2026
4-lessons-from-our-plan.png
82 KB · May 7, 2026
inside-the-bright-dashboard.xlsx
5 KB · Jul 18, 2026
what-s-new-in-land.zip
51 KB · Mar 11, 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">what-s-new-in-villas.pdf</div><div class="small text-body-secondary">28 KB &middot; Mar 23, 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">4-lessons-from-our-plan.png</div><div class="small text-body-secondary">82 KB &middot; May 7, 2026</div></div><button type="button" class="btn btn-sm btn-light border" aria-label="Download"><i class="bi bi-download" aria-hidden="true"></i></button></li>
  <li class="list-group-item d-flex align-items-center gap-3"><span class="fs-4 text-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">inside-the-bright-dashboard.xlsx</div><div class="small text-body-secondary">5 KB &middot; Jul 18, 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">what-s-new-in-land.zip</div><div class="small text-body-secondary">51 KB &middot; Mar 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>
</ul>

15Contact list

People with role and quick call and email actions.

Lucas Hughes
Customer Success
Arjun Kim
Content Writer
Amara Haddad
Sales Executive

<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-8.svg" alt="Lucas Hughes" class="rounded-circle flex-shrink-0" width="40" height="40"><div class="flex-grow-1"><div class="fw-semibold small">Lucas Hughes</div><div class="small text-body-secondary">Customer Success</div></div><div class="btn-group btn-group-sm" role="group" aria-label="Contact Lucas"><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-9.svg" alt="Arjun Kim" class="rounded-circle flex-shrink-0" width="40" height="40"><div class="flex-grow-1"><div class="fw-semibold small">Arjun Kim</div><div class="small text-body-secondary">Content Writer</div></div><div class="btn-group btn-group-sm" role="group" aria-label="Contact Arjun"><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-11.svg" alt="Amara Haddad" class="rounded-circle flex-shrink-0" width="40" height="40"><div class="flex-grow-1"><div class="fw-semibold small">Amara Haddad</div><div class="small text-body-secondary">Sales Executive</div></div><div class="btn-group btn-group-sm" role="group" aria-label="Contact Amara"><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.

Secure project100%
Friendly journey74%
Smart community67%

<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">Secure project</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">Friendly journey</span><span class="text-body-secondary">74%</span></div><div class="progress" role="progressbar" aria-label="Task progress" aria-valuenow="74" aria-valuemin="0" aria-valuemax="100" style="height: 6px;"><div class="progress-bar bg-primary" style="width: 74%;"></div></div></li>
  <li class="list-group-item"><div class="d-flex justify-content-between small mb-1"><span class="fw-semibold">Smart community</span><span class="text-body-secondary">67%</span></div><div class="progress" role="progressbar" aria-label="Task progress" aria-valuenow="67" aria-valuemin="0" aria-valuemax="100" style="height: 6px;"><div class="progress-bar bg-primary" style="width: 67%;"></div></div></li>
</ul>

18Inbox list

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

Luna Alvarez20:15

How we rebuilt our release

A powerful journey brings customers coming back in just a few clicks.

Omar Nguyen17:15

Inside the reliable project

This calm workflow shows results you can measure all year round.

Mateo Harlow15:45

Team notes for buyers

A flexible update guides complex tasks into simple steps wherever you are.

Omar Larsen15:45

7 lessons from our dashboard

This simple goal connects results you can measure without the usual hassle.

<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 Alvarez</span><small class="text-body-secondary ms-2 text-nowrap">20:15</small>
    </div>
    <div class="small text-truncate fw-semibold">
      How we rebuilt our release
    </div>
    <div class="small text-body-secondary text-truncate">
      A powerful journey brings customers coming back in just a few clicks.
    </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">Omar Nguyen</span><small class="text-body-secondary ms-2 text-nowrap">17:15</small>
    </div>
    <div class="small text-truncate fw-semibold">
      Inside the reliable project
    </div>
    <div class="small text-body-secondary text-truncate">
      This calm workflow shows results you can measure all year round.
    </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 Harlow</span><small class="text-body-secondary ms-2 text-nowrap">15:45</small>
    </div>
    <div class="small text-truncate text-body-secondary">
      Team notes for buyers
    </div>
    <div class="small text-body-secondary text-truncate">
      A flexible update guides complex tasks into simple steps wherever you are.
    </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="">Omar Larsen</span><small class="text-body-secondary ms-2 text-nowrap">15:45</small>
    </div>
    <div class="small text-truncate text-body-secondary">
      7 lessons from our dashboard
    </div>
    <div class="small text-body-secondary text-truncate">
      This simple goal connects results you can measure without the usual hassle.
    </div>
  </div>
  </a>
</div>

19Leaderboard

Ranked people with medal badges, avatars and scores.

1Ethan Fischer1116 pts
2Felix Ortega828 pts
3Ivy Moreau400 pts
4Tariq Alvarez235 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-1.svg" alt="Ethan Fischer" class="rounded-circle flex-shrink-0" width="36" height="36"><span class="flex-grow-1 small fw-semibold">Ethan Fischer</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-8.svg" alt="Felix Ortega" class="rounded-circle flex-shrink-0" width="36" height="36"><span class="flex-grow-1 small fw-semibold">Felix Ortega</span><span class="small">828 pts</span></li>
  <li class="list-group-item d-flex align-items-center gap-3"><span class="badge rounded-circle text-bg-danger ca-rank">3</span><img src="../assets/img/avatar-10.svg" alt="Ivy Moreau" class="rounded-circle flex-shrink-0" width="36" height="36"><span class="flex-grow-1 small fw-semibold">Ivy Moreau</span><span class="small">400 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="Tariq Alvarez" class="rounded-circle flex-shrink-0" width="36" height="36"><span class="flex-grow-1 small fw-semibold">Tariq Alvarez</span><span class="small">235 pts</span></li>
</ol>

20Reorderable list look

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

Fast paperwork1
Neighbourhood guides2
Expert agents3
Price alerts4

<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">Fast paperwork</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">Neighbourhood guides</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">Expert agents</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">Price alerts</span><span class="badge bg-body-secondary text-body-secondary">4</span></li>
</ul>