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.

Dine-in
Wine pairing
Private events
Takeaway

<ul class="list-group" style="max-width: 360px;">
  <li class="list-group-item">Dine-in</li>
  <li class="list-group-item">Wine pairing</li>
  <li class="list-group-item">Private events</li>
  <li class="list-group-item">Takeaway</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.

Online reservations
Local ingredients
Vegan options

<ul class="list-group list-group-flush border-t border-b">
  <li class="list-group-item">Online reservations</li>
  <li class="list-group-item">Local ingredients</li>
  <li class="list-group-item">Vegan options</li>
</ul>

5Numbered list

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

Our favourite tips for busy weeks
Sep 13, 2026
6
What our guests asked us most
Sep 20, 2025
28
Looking back at a busy season
Nov 14, 2025
20

<ol class="list-group list-group-numbered" style="max-width: 420px;">
  <li class="list-group-item flex justify-between items-start"><div class="ms-2 me-auto"><div class="font-semibold">Our favourite tips for busy weeks</div><span class="small text-muted">Sep 13, 2026</span></div><span class="badge text-bg-primary rounded-full">6</span></li>
  <li class="list-group-item flex justify-between items-start"><div class="ms-2 me-auto"><div class="font-semibold">What our guests asked us most</div><span class="small text-muted">Sep 20, 2025</span></div><span class="badge text-bg-primary rounded-full">28</span></li>
  <li class="list-group-item flex justify-between items-start"><div class="ms-2 me-auto"><div class="font-semibold">Looking back at a busy season</div><span class="small text-muted">Nov 14, 2025</span></div><span class="badge text-bg-primary rounded-full">20</span></li>
</ol>

6Horizontal list

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

72.3k
Visitors
493
Sign-ups
9%
Conversion

<ul class="list-group list-group-horizontal-md">
  <li class="list-group-item flex-auto text-center"><div class="font-bold">72.3k</div><small class="text-muted">Visitors</small></li>
  <li class="list-group-item flex-auto text-center"><div class="font-bold">493</div><small class="text-muted">Sign-ups</small></li>
  <li class="list-group-item flex-auto text-center"><div class="font-bold">9%</div><small class="text-muted">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.

Projects22
Tasks75
Issues7

<ul class="list-group" style="max-width: 360px;">
  <li class="list-group-item flex justify-between items-center"><span><i class="bi bi-folder-fill" aria-hidden="true"></i> Projects</span><span class="badge text-bg-primary rounded-full">22</span></li>
  <li class="list-group-item flex justify-between items-center"><span><i class="bi bi-check2-square" aria-hidden="true"></i> Tasks</span><span class="badge text-bg-success rounded-full">75</span></li>
  <li class="list-group-item flex justify-between items-center"><span><i class="bi bi-exclamation-circle-fill" aria-hidden="true"></i> Issues</span><span class="badge text-bg-danger rounded-full">7</span></li>
</ul>

9Custom content

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

How to choose the right dish

51 min ago

Our sommelier has paired each dish with wines from small family vineyards.

Noah Brennan

How we make our sourdough every morning

just now

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

Maya Ortega

Meet the farmers behind our menu

just now

Private dining rooms seat up to forty guests for birthdays and business dinners.

Tariq Duarte

<div class="list-group" style="max-width: 520px;">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
  <div class="flex w-full justify-between">
    <h6 class="mb-1">How to choose the right dish</h6>
    <small>51 min ago</small>
  </div>
  <p class="mb-1 small">Our sommelier has paired each dish with wines from small family vineyards.</p>
  <small class="">Noah Brennan</small></a><a href="#" class="list-group-item list-group-item-action">
  <div class="flex w-full justify-between">
    <h6 class="mb-1">How we make our sourdough every morning</h6>
    <small>just now</small>
  </div>
  <p class="mb-1 small">Our team has done this many times, so you never have to guess.</p>
  <small class="text-muted">Maya Ortega</small></a><a href="#" class="list-group-item list-group-item-action">
  <div class="flex w-full justify-between">
    <h6 class="mb-1">Meet the farmers behind our menu</h6>
    <small>just now</small>
  </div>
  <p class="mb-1 small">Private dining rooms seat up to forty guests for birthdays and business dinners.</p>
  <small class="text-muted">Tariq Duarte</small></a>
</div>

10Checkbox list

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

Elegant story friendly
Modern goal honest
Clear idea bright
Bright team 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 line-through text-muted" for="lg-chk-982">Elegant story friendly</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 line-through text-muted" for="lg-chk-983">Modern goal honest</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">Clear idea bright</label></li>
  <li class="list-group-item"><input class="form-check-input me-2" type="checkbox" id="lg-chk-985"><label class="form-check-label" for="lg-chk-985">Bright team 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 flex gap-4" for="lg-radio-opt-987"><input class="form-check-input shrink-0" type="radio" name="lg-radio-986" id="lg-radio-opt-987"><span><span class="block font-semibold">Starter</span><small class="text-muted">$9 / month</small></span></label>
  <label class="list-group-item flex gap-4" for="lg-radio-opt-988"><input class="form-check-input shrink-0" type="radio" name="lg-radio-986" id="lg-radio-opt-988" checked><span><span class="block font-semibold">Team</span><small class="text-muted">$29 / month</small></span></label>
  <label class="list-group-item flex gap-4" for="lg-radio-opt-989"><input class="form-check-input shrink-0" type="radio" name="lg-radio-986" id="lg-radio-opt-989"><span><span class="block font-semibold">Business</span><small class="text-muted">$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 have been feeding this neighbourhood for over a decade, and we still love it.

Two-step verification is on.

Cooking classes on Saturday mornings teach you our favourite recipes.

<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-md p-4 h-full">
      <div class="tab-pane fade show active" id="lg-tab-990" role="tabpanel" aria-labelledby="lg-tab-990-tab">
        <p class="mb-0">We have been feeding this neighbourhood for over a decade, and we still love it.</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">Cooking classes on Saturday mornings teach you our favourite recipes.</p>
      </div>
    </div>
  </div>
</div>

13Notification list

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

Leo Kowalski6 days ago

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

Omar Novakjust now

Every dish is cooked to order, so tell us if you would like anything changed.

Liam Okafor49 min ago

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

<div class="list-group" style="max-width: 440px;">
  <a href="#" class="list-group-item list-group-item-action flex gap-4 py-4"><img src="../assets/img/avatar-12.svg" alt="Leo Kowalski" class="rounded-full shrink-0" width="40" height="40">
  <div class="grow">
    <div class="flex justify-between">
      <strong class="small">Leo Kowalski</strong><small class="text-muted whitespace-nowrap ms-2">6 days ago</small>
    </div>
    <div class="small text-muted">
      Start in minutes and get help from a real person whenever you need it.
    </div>
  </div>
  <span class="p-1 bg-primary rounded-full self-center"><span class="sr-only">Unread</span></span></a><a href="#" class="list-group-item list-group-item-action flex gap-4 py-4"><img src="../assets/img/avatar-1.svg" alt="Omar Novak" class="rounded-full shrink-0" width="40" height="40">
  <div class="grow">
    <div class="flex justify-between">
      <strong class="small">Omar Novak</strong><small class="text-muted whitespace-nowrap ms-2">just now</small>
    </div>
    <div class="small text-muted">
      Every dish is cooked to order, so tell us if you would like anything changed.
    </div>
  </div>
  </a><a href="#" class="list-group-item list-group-item-action flex gap-4 py-4"><img src="../assets/img/avatar-11.svg" alt="Liam Okafor" class="rounded-full shrink-0" width="40" height="40">
  <div class="grow">
    <div class="flex justify-between">
      <strong class="small">Liam Okafor</strong><small class="text-muted whitespace-nowrap ms-2">49 min ago</small>
    </div>
    <div class="small text-muted">
      Every detail is handled by people who care about getting it right.
    </div>
  </div>
  </a>
</div>

14File list

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

a-beginner-s-guide-to-getting-started.pdf
238 KB · Jan 9, 2026
five-wines-to-pair-with-a-summer-dinner.png
203 KB · Jul 11, 2026
three-pasta-shapes-to-make-at-home.xlsx
812 KB · Feb 1, 2026
how-we-make-our-sourdough-every-morning.zip
181 KB · Jul 18, 2026

<ul class="list-group" style="max-width: 480px;">
  <li class="list-group-item flex items-center gap-4"><span class="text-xl text-danger-emphasis"><i class="bi bi-file-earmark-pdf-fill" aria-hidden="true"></i></span><div class="grow truncate"><div class="small font-semibold truncate">a-beginner-s-guide-to-getting-started.pdf</div><div class="small text-muted">238 KB &middot; Jan 9, 2026</div></div><button type="button" class="btn btn-sm btn-light border" aria-label="Download"><i class="bi bi-download" aria-hidden="true"></i></button></li>
  <li class="list-group-item flex items-center gap-4"><span class="text-xl text-success-emphasis"><i class="bi bi-file-earmark-image-fill" aria-hidden="true"></i></span><div class="grow truncate"><div class="small font-semibold truncate">five-wines-to-pair-with-a-summer-dinner.png</div><div class="small text-muted">203 KB &middot; Jul 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 flex items-center gap-4"><span class="text-xl text-primary-ink"><i class="bi bi-file-earmark-spreadsheet-fill" aria-hidden="true"></i></span><div class="grow truncate"><div class="small font-semibold truncate">three-pasta-shapes-to-make-at-home.xlsx</div><div class="small text-muted">812 KB &middot; Feb 1, 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 flex items-center gap-4"><span class="text-xl text-warning-emphasis"><i class="bi bi-file-earmark-zip-fill" aria-hidden="true"></i></span><div class="grow truncate"><div class="small font-semibold truncate">how-we-make-our-sourdough-every-morning.zip</div><div class="small text-muted">181 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>
</ul>

15Contact list

People with role and quick call and email actions.

Ivy Lindqvist
Backend Engineer
Ava Patel
Backend Engineer
Aria Rossi
QA Engineer

<ul class="list-group" style="max-width: 480px;">
  <li class="list-group-item flex items-center gap-4"><img src="../assets/img/avatar-7.svg" alt="Ivy Lindqvist" class="rounded-full shrink-0" width="40" height="40"><div class="grow"><div class="font-semibold small">Ivy Lindqvist</div><div class="small text-muted">Backend Engineer</div></div><div class="btn-group btn-group-sm" role="group" aria-label="Contact Ivy"><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 flex items-center gap-4"><img src="../assets/img/avatar-8.svg" alt="Ava Patel" class="rounded-full shrink-0" width="40" height="40"><div class="grow"><div class="font-semibold small">Ava Patel</div><div class="small text-muted">Backend Engineer</div></div><div class="btn-group btn-group-sm" role="group" aria-label="Contact Ava"><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 flex items-center gap-4"><img src="../assets/img/avatar-6.svg" alt="Aria Rossi" class="rounded-full shrink-0" width="40" height="40"><div class="grow"><div class="font-semibold small">Aria Rossi</div><div class="small text-muted">QA Engineer</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-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 flex items-center gap-4 py-4"><span class="text-lg text-primary-ink"><i class="bi bi-bell-fill" aria-hidden="true"></i></span><label class="grow" for="lg-switch-993"><span class="block font-semibold small">Push notifications</span><span class="small text-muted">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 flex items-center gap-4 py-4"><span class="text-lg text-primary-ink"><i class="bi bi-envelope-fill" aria-hidden="true"></i></span><label class="grow" for="lg-switch-994"><span class="block font-semibold small">Weekly digest</span><span class="small text-muted">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 flex items-center gap-4 py-4"><span class="text-lg text-primary-ink"><i class="bi bi-moon-fill" aria-hidden="true"></i></span><label class="grow" for="lg-switch-995"><span class="block font-semibold small">Dark mode</span><span class="small text-muted">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.

Honest experience100%
Flexible community27%
Bright plan68%

<ul class="list-group" style="max-width: 480px;">
  <li class="list-group-item"><div class="flex justify-between small mb-1"><span class="font-semibold">Honest experience</span><span class="text-muted">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="flex justify-between small mb-1"><span class="font-semibold">Flexible community</span><span class="text-muted">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="flex justify-between small mb-1"><span class="font-semibold">Bright plan</span><span class="text-muted">68%</span></div><div class="progress" role="progressbar" aria-label="Task progress" aria-valuenow="68" aria-valuemin="0" aria-valuemax="100" style="height: 6px;"><div class="progress-bar bg-primary" style="width: 68%;"></div></div></li>
</ul>

18Inbox list

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

Lucas Moreau17:45

What our guests asked us most

Private dining rooms seat up to forty guests for birthdays and business dinners.

Priya Hughes18:15

Five wines to pair with a summer dinner

Our terrace is open from spring to autumn, with heaters for cooler evenings.

Diego Kim09:00

Planning the perfect birthday dinner

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

Kai Ashford17:45

What is new on our winter menu

Vegan, vegetarian and gluten-free dishes are marked clearly on every menu.

<div class="list-group" style="max-width: 560px;">
  <a href="#" class="list-group-item list-group-item-action flex gap-4 items-start ca-unread"><span class="pt-1 text-warning-emphasis"><i class="bi bi-star-fill" aria-hidden="true"></i></span>
  <div class="grow truncate">
    <div class="flex justify-between">
      <span class="font-bold">Lucas Moreau</span><small class="text-muted ms-2 whitespace-nowrap">17:45</small>
    </div>
    <div class="small truncate font-semibold">
      What our guests asked us most
    </div>
    <div class="small text-muted truncate">
      Private dining rooms seat up to forty guests for birthdays and business dinners.
    </div>
  </div>
  </a><a href="#" class="list-group-item list-group-item-action flex gap-4 items-start ca-unread"><span class="pt-1 text-warning-emphasis"><i class="bi bi-star-fill" aria-hidden="true"></i></span>
  <div class="grow truncate">
    <div class="flex justify-between">
      <span class="font-bold">Priya Hughes</span><small class="text-muted ms-2 whitespace-nowrap">18:15</small>
    </div>
    <div class="small truncate font-semibold">
      Five wines to pair with a summer dinner
    </div>
    <div class="small text-muted truncate">
      Our terrace is open from spring to autumn, with heaters for cooler evenings.
    </div>
  </div>
  </a><a href="#" class="list-group-item list-group-item-action flex gap-4 items-start"><span class="pt-1 text-warning-emphasis"><i class="bi bi-star-fill" aria-hidden="true"></i></span>
  <div class="grow truncate">
    <div class="flex justify-between">
      <span class="">Diego Kim</span><small class="text-muted ms-2 whitespace-nowrap">09:00</small>
    </div>
    <div class="small truncate text-muted">
      Planning the perfect birthday dinner
    </div>
    <div class="small text-muted 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 flex gap-4 items-start"><span class="pt-1 text-warning-emphasis"><i class="bi bi-star-fill" aria-hidden="true"></i></span>
  <div class="grow truncate">
    <div class="flex justify-between">
      <span class="">Kai Ashford</span><small class="text-muted ms-2 whitespace-nowrap">17:45</small>
    </div>
    <div class="small truncate text-muted">
      What is new on our winter menu
    </div>
    <div class="small text-muted truncate">
      Vegan, vegetarian and gluten-free dishes are marked clearly on every menu.
    </div>
  </div>
  </a>
</div>

19Leaderboard

Ranked people with medal badges, avatars and scores.

1Ethan Haddad1168 pts
2Arjun Ibrahim714 pts
3Mason Morgan504 pts
4Isla Mensah222 pts

<ol class="list-group" style="max-width: 420px;">
  <li class="list-group-item flex items-center gap-4"><span class="badge rounded-full text-bg-warning ca-rank">1</span><img src="../assets/img/avatar-10.svg" alt="Ethan Haddad" class="rounded-full shrink-0" width="36" height="36"><span class="grow small font-semibold">Ethan Haddad</span><span class="small">1168 pts</span></li>
  <li class="list-group-item flex items-center gap-4"><span class="badge rounded-full text-bg-secondary ca-rank">2</span><img src="../assets/img/avatar-10.svg" alt="Arjun Ibrahim" class="rounded-full shrink-0" width="36" height="36"><span class="grow small font-semibold">Arjun Ibrahim</span><span class="small">714 pts</span></li>
  <li class="list-group-item flex items-center gap-4"><span class="badge rounded-full text-bg-danger ca-rank">3</span><img src="../assets/img/avatar-1.svg" alt="Mason Morgan" class="rounded-full shrink-0" width="36" height="36"><span class="grow small font-semibold">Mason Morgan</span><span class="small">504 pts</span></li>
  <li class="list-group-item flex items-center gap-4"><span class="badge rounded-full text-bg-light ca-rank">4</span><img src="../assets/img/avatar-6.svg" alt="Isla Mensah" class="rounded-full shrink-0" width="36" height="36"><span class="grow small font-semibold">Isla Mensah</span><span class="small">222 pts</span></li>
</ol>

20Reorderable list look

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

Fast delivery1
Online reservations2
Vegan options3
Local ingredients4

<ul class="list-group" style="max-width: 420px;">
  <li class="list-group-item flex items-center gap-2"><span class="text-tertiary ca-grip" title="Drag to reorder"><i class="bi bi-grip-vertical" aria-hidden="true"></i></span><span class="grow">Fast delivery</span><span class="badge bg-surface-2 text-muted">1</span></li>
  <li class="list-group-item flex items-center gap-2"><span class="text-tertiary ca-grip" title="Drag to reorder"><i class="bi bi-grip-vertical" aria-hidden="true"></i></span><span class="grow">Online reservations</span><span class="badge bg-surface-2 text-muted">2</span></li>
  <li class="list-group-item flex items-center gap-2"><span class="text-tertiary ca-grip" title="Drag to reorder"><i class="bi bi-grip-vertical" aria-hidden="true"></i></span><span class="grow">Vegan options</span><span class="badge bg-surface-2 text-muted">3</span></li>
  <li class="list-group-item flex items-center gap-2"><span class="text-tertiary ca-grip" title="Drag to reorder"><i class="bi bi-grip-vertical" aria-hidden="true"></i></span><span class="grow">Local ingredients</span><span class="badge bg-surface-2 text-muted">4</span></li>
</ul>