Bootstrap 5 List Group: A Complete Guide

The <ul> element with the .list-group class. Then add the .list-group-item to each <li> element and a .list-group-link class to each link inside <li>

Item 1
Item 2
Item 3

Example

</ul>

Try it yourself

Active and Disabled Items:

Use .active to highlight an item and .disabled to disable it.

Active Item
Item 2
Disabled Item

Example

<li class="list-group-item active" aria-current="true">Active Item</li>

<li class="list-group-item disabled" aria-disabled="true">Disabled Item</li>

</ul>

Try it yourself

List Group with Links

Use a elements for clickable list items.

Active Link Link 2 Disabled Link

Example

Active Link

</a>

Disabled Link

</a>

</div>

Try it yourself

Flush / Remove Borders

Use .list-group-flush for a list group with no borders and a seamless look.

Item 1
Item 2
Item 3

Example

</ul>

Try it yourself

Numbered List Groups

Use .list-group-numbered elements for numbered list items.

First item
Second item
Third item

Example

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

Try it yourself

List Group with Links

Use .list-group-horizontal to align items horizontally. Combine with responsive breakpoints for different layouts.

Item 1
Item 2
Item 3

Responsive

Item 1
Item 2
Item 3

Example

</ul>

<br/>

<h5>Responsive</h5>

</ul>

Try it yourself

Contextual Classes

Add colors using contextual classes like .list-group-item-primary, .list-group-item-secondary, etc.

Primary Item
Success Item
Danger Item

Example

<li class="list-group-item list-group-item-primary">Primary Item</li>

<li class="list-group-item list-group-item-success">Success Item</li>

<li class="list-group-item list-group-item-danger">Danger Item</li>

</ul>

Try it yourself

❮ Previous

Next ❯

Whereisstuff is simple learing platform for beginer to advance level to improve there skills in technologies.we will provide all material free of cost.you can write a code in runkit workspace and we provide some extrac features also, you agree to have read and accepted our terms of use, cookie and privacy policy.