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.

Airport transfers
Car rental
Hotel booking
Travel insurance

<ul class="list-group" style="max-width: 360px;">
  <li class="list-group-item">Airport transfers</li>
  <li class="list-group-item">Car rental</li>
  <li class="list-group-item">Hotel booking</li>
  <li class="list-group-item">Travel insurance</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.

Curated stays
24/7 assistance
Free cancellation

<ul class="list-group list-group-flush border-t border-b">
  <li class="list-group-item">Curated stays</li>
  <li class="list-group-item">24/7 assistance</li>
  <li class="list-group-item">Free cancellation</li>
</ul>

5Numbered list

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

Hidden beaches of the Mediterranean
Feb 16, 2026
27
How to pack for two weeks with one bag
Apr 28, 2026
7
Behind the scenes with our hotel inspectors
Sep 14, 2026
28

<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">Hidden beaches of the Mediterranean</div><span class="small text-muted">Feb 16, 2026</span></div><span class="badge text-bg-primary rounded-full">27</span></li>
  <li class="list-group-item flex justify-between items-start"><div class="ms-2 me-auto"><div class="font-semibold">How to pack for two weeks with one bag</div><span class="small text-muted">Apr 28, 2026</span></div><span class="badge text-bg-primary rounded-full">7</span></li>
  <li class="list-group-item flex justify-between items-start"><div class="ms-2 me-auto"><div class="font-semibold">Behind the scenes with our hotel inspectors</div><span class="small text-muted">Sep 14, 2026</span></div><span class="badge text-bg-primary rounded-full">28</span></li>
</ol>

6Horizontal list

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

80.4k
Visitors
723
Sign-ups
54%
Conversion

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

Projects28
Tasks77
Issues4

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

9Custom content

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

A beginner's guide to getting started

17 hours ago

We find the best price, and if you see it cheaper we match it.

Sofia Morgan

How to travel more responsibly

8 min ago

Members get room upgrades and late check-out at selected hotels.

Priya Brennan

Our favourite small hotels this year

yesterday

From city breaks to safaris, we plan trips around how you like to travel.

Tariq Okafor

<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">A beginner&#39;s guide to getting started</h6>
    <small>17 hours ago</small>
  </div>
  <p class="mb-1 small">We find the best price, and if you see it cheaper we match it.</p>
  <small class="">Sofia Morgan</small></a><a href="#" class="list-group-item list-group-item-action">
  <div class="flex w-full justify-between">
    <h6 class="mb-1">How to travel more responsibly</h6>
    <small>8 min ago</small>
  </div>
  <p class="mb-1 small">Members get room upgrades and late check-out at selected hotels.</p>
  <small class="text-muted">Priya Brennan</small></a><a href="#" class="list-group-item list-group-item-action">
  <div class="flex w-full justify-between">
    <h6 class="mb-1">Our favourite small hotels this year</h6>
    <small>yesterday</small>
  </div>
  <p class="mb-1 small">From city breaks to safaris, we plan trips around how you like to travel.</p>
  <small class="text-muted">Tariq Okafor</small></a>
</div>

10Checkbox list

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

Elegant release focused
Bright plan powerful
Smart community fast
Practical dashboard elegant

<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 release focused</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">Bright plan powerful</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">Smart community fast</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">Practical dashboard elegant</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

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

Two-step verification is on.

Travel insurance and car rental can be added in a single click.

<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">Friendly people answer your questions quickly, by phone, chat or email.</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">Travel insurance and car rental can be added in a single click.</p>
      </div>
    </div>
  </div>
</div>

13Notification list

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

Leo Mensahjust now

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

Omar Vargayesterday

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

Ravi Tanakajust now

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

<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-11.svg" alt="Leo Mensah" class="rounded-full shrink-0" width="40" height="40">
  <div class="grow">
    <div class="flex justify-between">
      <strong class="small">Leo Mensah</strong><small class="text-muted whitespace-nowrap ms-2">just now</small>
    </div>
    <div class="small text-muted">
      Every detail is handled by people who care about getting it right.
    </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-4.svg" alt="Omar Varga" class="rounded-full shrink-0" width="40" height="40">
  <div class="grow">
    <div class="flex justify-between">
      <strong class="small">Omar Varga</strong><small class="text-muted whitespace-nowrap ms-2">yesterday</small>
    </div>
    <div class="small text-muted">
      We measure success by how many travellers come back and tell their friends.
    </div>
  </div>
  </a><a href="#" class="list-group-item list-group-item-action flex gap-4 py-4"><img src="../assets/img/avatar-7.svg" alt="Ravi Tanaka" class="rounded-full shrink-0" width="40" height="40">
  <div class="grow">
    <div class="flex justify-between">
      <strong class="small">Ravi Tanaka</strong><small class="text-muted whitespace-nowrap ms-2">just now</small>
    </div>
    <div class="small text-muted">
      We listen first, then build a plan around what you actually need.
    </div>
  </div>
  </a>
</div>

14File list

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

a-first-timer-s-guide-to-safari.pdf
869 KB · Nov 22, 2025
five-things-we-learned-this-year.png
560 KB · Mar 6, 2026
what-our-travellers-asked-us-most.xlsx
724 KB · Jan 14, 2026
behind-the-scenes-with-our-hotel-inspectors.zip
237 KB · Feb 26, 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-first-timer-s-guide-to-safari.pdf</div><div class="small text-muted">869 KB &middot; Nov 22, 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 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-things-we-learned-this-year.png</div><div class="small text-muted">560 KB &middot; Mar 6, 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">what-our-travellers-asked-us-most.xlsx</div><div class="small text-muted">724 KB &middot; Jan 14, 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">behind-the-scenes-with-our-hotel-inspectors.zip</div><div class="small text-muted">237 KB &middot; Feb 26, 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.

Jonah Larsen
Project Manager
Chloe Nguyen
Art Director
Samir Novak
HR Partner

<ul class="list-group" style="max-width: 480px;">
  <li class="list-group-item flex items-center gap-4"><img src="../assets/img/avatar-3.svg" alt="Jonah Larsen" class="rounded-full shrink-0" width="40" height="40"><div class="grow"><div class="font-semibold small">Jonah Larsen</div><div class="small text-muted">Project Manager</div></div><div class="btn-group btn-group-sm" role="group" aria-label="Contact Jonah"><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-7.svg" alt="Chloe Nguyen" class="rounded-full shrink-0" width="40" height="40"><div class="grow"><div class="font-semibold small">Chloe Nguyen</div><div class="small text-muted">Art Director</div></div><div class="btn-group btn-group-sm" role="group" aria-label="Contact Chloe"><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-5.svg" alt="Samir Novak" class="rounded-full shrink-0" width="40" height="40"><div class="grow"><div class="font-semibold small">Samir Novak</div><div class="small text-muted">HR Partner</div></div><div class="btn-group btn-group-sm" role="group" aria-label="Contact Samir"><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.

Secure goal100%
Bright team47%
Elegant routine25%

<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">Secure goal</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">Bright team</span><span class="text-muted">47%</span></div><div class="progress" role="progressbar" aria-label="Task progress" aria-valuenow="47" aria-valuemin="0" aria-valuemax="100" style="height: 6px;"><div class="progress-bar bg-warning" style="width: 47%;"></div></div></li>
  <li class="list-group-item"><div class="flex justify-between small mb-1"><span class="font-semibold">Elegant routine</span><span class="text-muted">25%</span></div><div class="progress" role="progressbar" aria-label="Task progress" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="height: 6px;"><div class="progress-bar bg-warning" style="width: 25%;"></div></div></li>
</ul>

18Inbox list

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

Noah Moreau09:00

How to choose the right trip

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

Ethan Alvarez10:45

Looking back at a busy season

Flexible dates help you find quieter weeks and better prices.

Isla Quinn15:15

How to pack for two weeks with one bag

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

Maya Ashford13:00

How to travel more responsibly

Members get room upgrades and late check-out at selected hotels.

<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">Noah Moreau</span><small class="text-muted ms-2 whitespace-nowrap">09:00</small>
    </div>
    <div class="small truncate font-semibold">
      How to choose the right trip
    </div>
    <div class="small text-muted truncate">
      Clear prices, honest advice and no surprises along the way.
    </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">Ethan Alvarez</span><small class="text-muted ms-2 whitespace-nowrap">10:45</small>
    </div>
    <div class="small truncate font-semibold">
      Looking back at a busy season
    </div>
    <div class="small text-muted truncate">
      Flexible dates help you find quieter weeks and better prices.
    </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="">Isla Quinn</span><small class="text-muted ms-2 whitespace-nowrap">15:15</small>
    </div>
    <div class="small truncate text-muted">
      How to pack for two weeks with one bag
    </div>
    <div class="small text-muted truncate">
      We keep things simple, so you can focus on what matters to you.
    </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="">Maya Ashford</span><small class="text-muted ms-2 whitespace-nowrap">13:00</small>
    </div>
    <div class="small truncate text-muted">
      How to travel more responsibly
    </div>
    <div class="small text-muted truncate">
      Members get room upgrades and late check-out at selected hotels.
    </div>
  </div>
  </a>
</div>

19Leaderboard

Ranked people with medal badges, avatars and scores.

1Hana Kowalski1144 pts
2Ivy Carter651 pts
3Diego Ortega452 pts
4Kai Duarte205 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-12.svg" alt="Hana Kowalski" class="rounded-full shrink-0" width="36" height="36"><span class="grow small font-semibold">Hana Kowalski</span><span class="small">1144 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-5.svg" alt="Ivy Carter" class="rounded-full shrink-0" width="36" height="36"><span class="grow small font-semibold">Ivy Carter</span><span class="small">651 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-5.svg" alt="Diego Ortega" class="rounded-full shrink-0" width="36" height="36"><span class="grow small font-semibold">Diego Ortega</span><span class="small">452 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-2.svg" alt="Kai Duarte" class="rounded-full shrink-0" width="36" height="36"><span class="grow small font-semibold">Kai Duarte</span><span class="small">205 pts</span></li>
</ol>

20Reorderable list look

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

Free cancellation1
Curated stays2
Best price guarantee3
Flexible dates4

<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">Free cancellation</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">Curated stays</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">Best price guarantee</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">Flexible dates</span><span class="badge bg-surface-2 text-muted">4</span></li>
</ul>