Bootstrap List Group

In Bootstrap, a list group is a flexible and powerful component for displaying a series of content items in a structured, list format. It is useful for creating lists with various styles and allows for additional features like contextual classes, badges, links, and custom content.

List groups are a flexible and powerful component for displaying a series of content.

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:
<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

Use the .active class to highlight the current item: 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

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:
<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 class adds a lighter text color to the disabled item. And when used on links, it will remove the hover effect:

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 Border

Use the .list-group-flush class to remove some borders and rounded corners:

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

Use the .list-group-numbered class to create list items with numbers in front of them:

Example:
<ol class="list-group list-group-numbered">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
</ol>

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:
<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>