BS5 List Groups
Bootstrap 5 List Groups
An unordered list with list elements is the most fundamental type of list group:
- First item
- Second item
- Third item
Use <li> elements with class .list-group-item and <ul> elements with class .list-group to construct a simple list group:
Example
<ul class="list-group">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
</ul>
Active State
- Active item
- Second item
- Third item
To make the current object stand out, use the .active class:
Example
<ul class="list-group">
<li class="list-group-item active">Active item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
</ul>
List Group With Linked Items
==== Example MUKAVU ====
Instead of using <ul> and <li>, use <div> and <a> to build a list group with linked elements. To enable a grey background color when hovering over an item, you can optionally add the .list-group-item-action class:
Example
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">First item</a>
<a href="#" class="list-group-item list-group-item-action">Second item</a>
<a href="#" class="list-group-item list-group-item-action">Third item</a>
</div>
Disabled Item
The disabled item’s text color is made lighter using the .disabled class. Additionally, it will eliminate the hover effect on links when used:
==== Example MUKAVU ====
Example
<div class="list-group">
<a href="#" class="list-group-item disabled">Disabled item</a>
<a href="#" class="list-group-item disabled">Disabled item</a>
<a href="#" class="list-group-item">Third item</a>
</div>
Flush / Remove Borders
Apply the .list-group-flush class to eliminate some rounded corners and borders:
First item
Second item
Third item
Fourth item
Example
<ul class="list-group list-group-flush">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
<li class="list-group-item">Fourth item</li>
</ul>
Numbered List Groups
To make list elements with numbers in front of them, use the .list-group-numbered class:
==== Example MUKAVU ====
Example
<ul class="list-group list-group-horizontal">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
<li class="list-group-item">Fourth item</li>
</ul>
Horizontal List Groups
To make the list elements appear side by side rather than stacked on top of one another, add the .list-group-horizontal class to the .list-group:
==== Example MUKAVU ====
Example
<ul class="list-group list-group-horizontal">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
<li class="list-group-item">Fourth item</li>
</ul>
Contextual Classes
List items can be colored using contextual classes:
- Success item
- Secondary item
- Info item
- Warning item
- Danger item
- Primary item
- Dark item
- Light item
The coloring list items have the following classes: .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
<ul class="list-group">
<li class="list-group-item list-group-item-success">Success item</li>
<li class="list-group-item list-group-item-secondary">Secondary item</li>
<li class="list-group-item list-group-item-info">Info item</li>
<li class="list-group-item list-group-item-warning">Warning item</li>
<li class="list-group-item list-group-item-danger">Danger item</li>
<li class="list-group-item list-group-item-primary">Primary item</li>
<li class="list-group-item list-group-item-dark">Dark item</li>
<li class="list-group-item list-group-item-light">Light item</li>
</ul>
Link items with Contextual Classes
Example
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">Action 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-secondary">Secondary 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-warning">Warning 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-primary">Primary item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-dark">Dark item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-light">Light item</a>
</div>
List Group with Badges
To add badges inside the list group, combine utility/helper classes with .badge classes:
- Inbox12
- Ads50
- Junk99
Example
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
Inbox
<span class="badge badge-primary badge-pill">12</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Ads
<span class="badge badge-primary badge-pill">50</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Junk
<span class="badge badge-primary badge-pill">99</span>
</li>
</ul>
