Bootstrap List Groups
A list group is a flexible way to display a series of related items in a clean, bordered box. Think of a settings menu, a list of recent messages, or a to-do list. Bootstrap's list group component gives all of these a consistent look with almost no effort, and it can grow into links, buttons, badges, and colored rows when you need more.
The basic list group
The simplest list group is an unordered list with the class .list-group, where every <li> also has the class .list-group-item. Bootstrap removes the default bullet points and adds borders, padding, and rounded corners so the items sit neatly together.
A simple list group
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<ul class="list-group">
<li class="list-group-item">Dashboard</li>
<li class="list-group-item">Messages</li>
<li class="list-group-item">Settings</li>
</ul>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Active and disabled items
Just like with pagination, you can highlight one item as .active to show it is selected, and mark others as .disabled so they look inactive. These classes go directly on the .list-group-item.
Highlighting items
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<ul class="list-group">
<li class="list-group-item active" aria-current="true">Inbox</li>
<li class="list-group-item">Starred</li>
<li class="list-group-item disabled">Archived</li>
</ul>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Links and buttons
To make the items clickable, swap the <ul> for a <div> and use <a> or <button> tags with the class .list-group-item-action added alongside .list-group-item. That extra class adds hover and focus effects so the items feel interactive.
A clickable list group of links
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active">Profile</a>
<a href="#" class="list-group-item list-group-item-action">Billing</a>
<a href="#" class="list-group-item list-group-item-action">Notifications</a>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Colors and badges
You can color individual rows with contextual classes such as .list-group-item-success or .list-group-item-danger. You can also drop a badge inside an item to show a count, using flex utilities to push it to the far end of the row.
Colored rows and a count badge
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<ul class="list-group">
<li class="list-group-item list-group-item-success">Payment received</li>
<li class="list-group-item list-group-item-warning">Awaiting review</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Unread messages
<span class="badge bg-primary rounded-pill">14</span>
</li>
</ul>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Useful list group classes
Exercise: Bootstrap List Groups
Which class turns a plain list group item into a clickable, hoverable link or button style?
