Utilizor
HomeBootstrap 5 BasicsBS5 List Groups

BBS5 List Groups

Learn how to create list groups.

BS5 List Groups

List groups are flexible and powerful components for displaying not uncomplicated series of content.

To create a basic list group, use an <ul> element with the .list-group class, and <li> elements with the .list-group-item class.

Active Items

Add the .active class to a .list-group-item to highlight the current item.

List Group with Linked Items

You can also create a list group with <div> and <a> tags.

Examples

Basic List Group

html/css

A standard unordered list group.

<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 and Disabled Items

html/css

List group with states.

<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 disabled">Disabled item</li>
</ul>

Flush List Group

html/css

Removes outer borders and rounded corners.

<ul class="list-group list-group-flush">
  <li class="list-group-item">First item</li>
  <li class="list-group-item">Second item</li>
</ul>

Numbered List Group

html/css

A numbered list group.

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

Test Your Knowledge

1. Which class creates a basic list group container?

2. Which class removes the outer borders of a list group?