Menu
Bootstrap 5 List Groups
Basic List Groups
The most basic list group is an unordered list with list items:
To create a basic list group, use an <ul> element with class .list-group, and <li> elements with class .list-group-item:
Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<h2>Basic List Group</h2>
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
</div>
</body>
</html>
Active State
Use the .active class to highlight the current item:
Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<h2>Active Item in a List Group</h2>
<ul>
<li>Active item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
</div>
</body>
</html>
List Group With Linked Items
To create a list group with linked items, use <div> instead of <ul> and <a> instead of <li>. Optionally, add the .list-group-item-action class if you want a grey background color on hover:
Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<h2>List Group With Linked Items</h2>
<div>
<a href=”#”>First item</a>
<a href=”#”>Second item</a>
<a href=”#”>Third item</a>
</div>
</div>
</body>
</html>
Disabled Item
The .disabled class adds a lighter text color to the disabled item. And when used on links, it will remove the hover effect:
Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<h2>List Group With a Disabled Item</h2>
<p>The disabled class adds a lighter text color to the disabled item. And if used on links, it will remove the default hover effect.</p>
<div>
<a href=”#”>Disabled item</a>
<a href=”#”>Disabled item</a>
<a href=”#”>Third item</a>
</div>
</div>
</body>
</html>
Flush / Remove Borders
Use the .list-group-flush class to remove some borders and rounded corners:
Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<h2>Flush / Remove Borders</h2>
<p>Use the .list-group-flush class to remove some borders and rounded corners:</p>
</div>
<div>
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
</ul>
</div>
</body>
</html>
Numbered List Groups
Use the .list-group-numbered class to create list items with numbers in front of them:
Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<h2>Numbered List Group</h2>
<p>Use the .list-group-numbered class to create list items with numbers in front of them:</p>
</div>
<div>
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
</div>
</body>
</html>
Horizontal List Groups
If you want the list items to display horizontally instead of vertically (side by side instead of on top of each other), add the .list-group-horizontal class to .list-group:
Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<h2>Horizontal List Groups</h2>
<p>The .list-group-horizontal class displays the list items horizontally instead of vertically:</p>
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
</ul>
</div>
</body>
</html>
Contextual Classes
Contextual classes can be used to add color to the list items:
The classes for coloring list-items are: .list-group-item-success, list-group-item-secondary, list-group-item-info, list-group-item-warning, .list-group-item-danger, .list-group-item-primary, list-group-item-dark and list-group-item-light,:
Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<h2>List Group With Contextual Classes</h2>
<ul>
<li>Success item</li>
<li>Secondary item</li>
<li>Info item</li>
<li>Warning item</li>
<li>Danger item</li>
<li>Primary item</li>
<li>Dark item</li>
<li>Light item</li>
</ul>
</div>
</body>
</html>
Link items with Contextual Classes
Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<h2>Linked Items With Contextual Classes</h2>
<p>Move the mouse over the linked items to see the hover effect:</p>
<div>
<a href=”#”>Action item</a>
<a href=”#”>Success item</a>
<a href=”#”>Secondary item</a>
<a href=”#”>Info item</a>
<a href=”#”>Warning item</a>
<a href=”#”>Danger item</a>
<a href=”#”>Primary item</a>
<a href=”#”>Dark item</a>
<a href=”#”>Light item</a>
</div>
</div>
</body>
</html>
List Group with Badges
Combine .badge classes with utility/helper classes to add badges inside the list group:
Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<h2>List Group With Badges</h2>
<p>Combine .badge classes with utility/helper classes to add badges inside the list group:</p>
<ul>
<li>
Inbox
<span>12</span>
</li>
<li>
Ads
<span>50</span>
</li>
<li>
Junk
<span>99</span>
</li>
</ul>
</div>
</body>
</html>