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.

Campaign production
Web design
Brand identity
Content strategy

<ul class="list-group" style="max-width: 360px;">
  <li class="list-group-item">Campaign production</li>
  <li class="list-group-item">Web design</li>
  <li class="list-group-item">Brand identity</li>
  <li class="list-group-item">Content strategy</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.

Global clients
Senior designers only
Award-winning team

<ul class="list-group list-group-flush border-top border-bottom">
  <li class="list-group-item">Global clients</li>
  <li class="list-group-item">Senior designers only</li>
  <li class="list-group-item">Award-winning team</li>
</ul>

5Numbered list

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

How we ran a rebrand in eight weeks
Oct 8, 2025
21
Planning a month of social content in a day
Sep 21, 2025
25
Why motion matters for modern brands
Feb 24, 2026
20

<ol class="list-group list-group-numbered" style="max-width: 420px;">
  <li class="list-group-item d-flex justify-content-between align-items-start"><div class="ms-2 me-auto"><div class="fw-semibold">How we ran a rebrand in eight weeks</div><span class="small text-body-secondary">Oct 8, 2025</span></div><span class="badge text-bg-primary rounded-pill">21</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">Planning a month of social content in a day</div><span class="small text-body-secondary">Sep 21, 2025</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">Why motion matters for modern brands</div><span class="small text-body-secondary">Feb 24, 2026</span></div><span class="badge text-bg-primary rounded-pill">20</span></li>
</ol>

6Horizontal list

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

16.6k
Visitors
505
Sign-ups
87%
Conversion

<ul class="list-group list-group-horizontal-md">
  <li class="list-group-item flex-fill text-center"><div class="fw-bold">16.6k</div><small class="text-body-secondary">Visitors</small></li>
  <li class="list-group-item flex-fill text-center"><div class="fw-bold">505</div><small class="text-body-secondary">Sign-ups</small></li>
  <li class="list-group-item flex-fill text-center"><div class="fw-bold">87%</div><small class="text-body-secondary">Conversion</small></li>
</ul>

7Contextual colours

list-group-item-* colours individual items.

Primary item Secondary item Success item Danger item Warning item Info item Light item Dark item

<div class="list-group" style="max-width: 360px;">
  <a href="#" class="list-group-item list-group-item-action list-group-item-primary">Primary item</a><a href="#" class="list-group-item list-group-item-action list-group-item-secondary">Secondary item</a><a href="#" class="list-group-item list-group-item-action list-group-item-success">Success item</a><a href="#" class="list-group-item list-group-item-action list-group-item-danger">Danger item</a><a href="#" class="list-group-item list-group-item-action list-group-item-warning">Warning item</a><a href="#" class="list-group-item list-group-item-action list-group-item-info">Info item</a><a href="#" class="list-group-item list-group-item-action list-group-item-light">Light item</a><a href="#" class="list-group-item list-group-item-action list-group-item-dark">Dark item</a>
</div>

8With badges

Pill badges at the end of each item show counts.

Projects7
Tasks62
Issues8

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

9Custom content

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

Five website mistakes that cost you leads

yesterday

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

Zoe Moreau

The small habits that make a big difference

yesterday

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

Ivy Okafor

Designing packaging that survives the shelf

25 min ago

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

Elena Quinn

<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">Five website mistakes that cost you leads</h6>
    <small>yesterday</small>
  </div>
  <p class="mb-1 small">Friendly people answer your questions quickly, by phone, chat or email.</p>
  <small class="">Zoe Moreau</small></a><a href="#" class="list-group-item list-group-item-action">
  <div class="d-flex w-100 justify-content-between">
    <h6 class="mb-1">The small habits that make a big difference</h6>
    <small>yesterday</small>
  </div>
  <p class="mb-1 small">Every detail is handled by people who care about getting it right.</p>
  <small class="text-body-secondary">Ivy Okafor</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">Designing packaging that survives the shelf</h6>
    <small>25 min ago</small>
  </div>
  <p class="mb-1 small">We measure success by how many clients come back and tell their friends.</p>
  <small class="text-body-secondary">Elena Quinn</small></a>
</div>

10Checkbox list

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

Honest journey simple
Bright update simple
Calm process smart
Clear workflow focused

<ul class="list-group" style="max-width: 360px;">
  <li class="list-group-item"><input class="form-check-input me-2" type="checkbox" id="lg-chk-982" checked><label class="form-check-label text-decoration-line-through text-body-secondary" for="lg-chk-982">Honest journey simple</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">Bright update simple</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 process 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">Clear workflow focused</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

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

Two-step verification is on.

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

<div class="row g-3">
  <div class="col-sm-4">
    <div class="list-group" role="tablist">
      <a class="list-group-item list-group-item-action active" id="lg-tab-990-tab" data-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">We listen first, then build a plan around what you actually need.</p>
      </div>
      <div class="tab-pane fade" id="lg-tab-991" role="tabpanel" aria-labelledby="lg-tab-991-tab">
        <p class="mb-0"><i class="bi bi-shield-lock-fill" aria-hidden="true"></i> Two-step verification is on.</p>
      </div>
      <div class="tab-pane fade" id="lg-tab-992" role="tabpanel" aria-labelledby="lg-tab-992-tab">
        <p class="mb-0">Friendly people answer your questions quickly, by phone, chat or email.</p>
      </div>
    </div>
  </div>
</div>

13Notification list

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

Aria Ibrahim18 hours ago

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

Nora Lindqvistjust now

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

Amara Delgadoyesterday

Fixed prices and weekly demos keep you in control from start to finish.

<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-1.svg" alt="Aria Ibrahim" 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 Ibrahim</strong><small class="text-body-secondary text-nowrap ms-2">18 hours ago</small>
    </div>
    <div class="small text-body-secondary">
      We keep things simple, so you can focus on what matters to you.
    </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-1.svg" alt="Nora Lindqvist" 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">Nora Lindqvist</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>
  </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="Amara Delgado" class="rounded-circle flex-shrink-0" width="40" height="40">
  <div class="flex-grow-1">
    <div class="d-flex justify-content-between">
      <strong class="small">Amara Delgado</strong><small class="text-body-secondary text-nowrap ms-2">yesterday</small>
    </div>
    <div class="small text-body-secondary">
      Fixed prices and weekly demos keep you in control from start to finish.
    </div>
  </div>
  </a>
</div>

14File list

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

what-makes-a-brand-memorable.pdf
621 KB · Dec 6, 2025
lessons-from-a-year-of-client-workshops.png
73 KB · Nov 16, 2025
what-our-clients-asked-us-most.xlsx
520 KB · Jun 13, 2026
how-we-ran-a-rebrand-in-eight-weeks.zip
829 KB · Sep 20, 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">what-makes-a-brand-memorable.pdf</div><div class="small text-body-secondary">621 KB &middot; Dec 6, 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-fill" aria-hidden="true"></i></span><div class="flex-grow-1 text-truncate"><div class="small fw-semibold text-truncate">lessons-from-a-year-of-client-workshops.png</div><div class="small text-body-secondary">73 KB &middot; Nov 16, 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-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">what-our-clients-asked-us-most.xlsx</div><div class="small text-body-secondary">520 KB &middot; Jun 13, 2026</div></div><button type="button" class="btn btn-sm btn-light border" aria-label="Download"><i class="bi bi-download" aria-hidden="true"></i></button></li>
  <li class="list-group-item d-flex align-items-center gap-3"><span class="fs-4 text-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">how-we-ran-a-rebrand-in-eight-weeks.zip</div><div class="small text-body-secondary">829 KB &middot; Sep 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>
</ul>

15Contact list

People with role and quick call and email actions.

Leo Hughes
Project Manager
Mia Ashford
Data Analyst
Kai Kowalski
Product Designer

<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-9.svg" alt="Leo Hughes" class="rounded-circle flex-shrink-0" width="40" height="40"><div class="flex-grow-1"><div class="fw-semibold small">Leo Hughes</div><div class="small text-body-secondary">Project Manager</div></div><div class="btn-group btn-group-sm" role="group" aria-label="Contact Leo"><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-1.svg" alt="Mia Ashford" class="rounded-circle flex-shrink-0" width="40" height="40"><div class="flex-grow-1"><div class="fw-semibold small">Mia Ashford</div><div class="small text-body-secondary">Data Analyst</div></div><div class="btn-group btn-group-sm" role="group" aria-label="Contact Mia"><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-9.svg" alt="Kai Kowalski" class="rounded-circle flex-shrink-0" width="40" height="40"><div class="flex-grow-1"><div class="fw-semibold small">Kai Kowalski</div><div class="small text-body-secondary">Product Designer</div></div><div class="btn-group btn-group-sm" role="group" aria-label="Contact Kai"><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.

Fast journey100%
Practical community27%
Secure release14%

<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">Fast journey</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">Practical community</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">Secure release</span><span class="text-body-secondary">14%</span></div><div class="progress" role="progressbar" aria-label="Task progress" aria-valuenow="14" aria-valuemin="0" aria-valuemax="100" style="height: 6px;"><div class="progress-bar bg-warning" style="width: 14%;"></div></div></li>
</ul>

18Inbox list

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

Ella Varga16:45

Choosing colours that sell

We test early with real users, so the final design works on the first day.

Sofia Nguyen13:15

Why motion matters for modern brands

Clear prices, honest advice and no surprises along the way.

Noah Rossi15:15

Five website mistakes that cost you leads

Our motion team turns complex ideas into short films people actually watch.

Nadia Fischer14:45

The small habits that make a big difference

We measure success in sign-ups, sales and brand recall, not just awards.

<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">Ella Varga</span><small class="text-body-secondary ms-2 text-nowrap">16:45</small>
    </div>
    <div class="small text-truncate fw-semibold">
      Choosing colours that sell
    </div>
    <div class="small text-body-secondary text-truncate">
      We test early with real users, so the final design works on the first day.
    </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">Sofia Nguyen</span><small class="text-body-secondary ms-2 text-nowrap">13:15</small>
    </div>
    <div class="small text-truncate fw-semibold">
      Why motion matters for modern brands
    </div>
    <div class="small text-body-secondary text-truncate">
      Clear prices, honest advice and no surprises along the way.
    </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="">Noah Rossi</span><small class="text-body-secondary ms-2 text-nowrap">15:15</small>
    </div>
    <div class="small text-truncate text-body-secondary">
      Five website mistakes that cost you leads
    </div>
    <div class="small text-body-secondary text-truncate">
      Our motion team turns complex ideas into short films people actually watch.
    </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="">Nadia Fischer</span><small class="text-body-secondary ms-2 text-nowrap">14:45</small>
    </div>
    <div class="small text-truncate text-body-secondary">
      The small habits that make a big difference
    </div>
    <div class="small text-body-secondary text-truncate">
      We measure success in sign-ups, sales and brand recall, not just awards.
    </div>
  </div>
  </a>
</div>

19Leaderboard

Ranked people with medal badges, avatars and scores.

1Chloe Whitaker884 pts
2Mason Larsen738 pts
3Omar Silva588 pts
4Luna 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-11.svg" alt="Chloe Whitaker" class="rounded-circle flex-shrink-0" width="36" height="36"><span class="flex-grow-1 small fw-semibold">Chloe Whitaker</span><span class="small">884 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="Mason Larsen" class="rounded-circle flex-shrink-0" width="36" height="36"><span class="flex-grow-1 small fw-semibold">Mason Larsen</span><span class="small">738 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-11.svg" alt="Omar Silva" class="rounded-circle flex-shrink-0" width="36" height="36"><span class="flex-grow-1 small fw-semibold">Omar Silva</span><span class="small">588 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-4.svg" alt="Luna Mensah" class="rounded-circle flex-shrink-0" width="36" height="36"><span class="flex-grow-1 small fw-semibold">Luna 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).

Fixed-price projects1
Weekly demos2
Fast turnaround3
Global clients4

<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">Fixed-price projects</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">Weekly demos</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">Fast turnaround</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">Global clients</span><span class="badge bg-body-secondary text-body-secondary">4</span></li>
</ul>