WS WhereIsStuff
Tutorial Guides
Log In
Sign Up

Advertisement

Google Ad Slot: content-top

Bootstrap 5 List Group

~1 min read · Bootstrap
On this page
❮ Previous Next ❯

List groups in Bootstrap 5 provide a flexible and customizable way to display a series of content, such as navigation links or informational items

Basic Example:

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
  • Item 1
  • Item 2
  • Item 3
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
  • Active Item
  • Item 2
  • Disabled Item
Try it yourself

List Group with Links

Use a elements for clickable list items.

Active Link Link 2 Disabled Link
Example
Active Link Link 2 Disabled Link
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
  • Item 1
  • Item 2
  • Item 3
Try it yourself

Numbered List Groups

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

  1. First item
  2. Second item
  3. Third item
Example
  1. First item
  2. Second item
  3. Third item
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
  • Item 1
  • Item 2
  • Item 3

Responsive
  • Item 1
  • Item 2
  • Item 3
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
  • Primary Item
  • Success Item
  • Danger Item
Try it yourself

❮ Previous Next ❯