Bootstrap - List groups

A versatile and effective method for displaying lists of content in a standardized and aesthetically pleasing fashion is to use Bootstrap 5 list groups. Bootstrap's list group component is an ideal solution whether you want to construct a simple list of items, buttons, links, or complicated content with badges and icons.

We'll go over the varieties of Bootstrap 5 list groups, how to use them, and advanced customization methods in this blog post.

1. List Group Basics

An unordered list (<ul>) using the.list-group class is the most basic type of list group in Bootstrap 5. The .list-group-item class is used to style each list item inside the group in a consistent manner.

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>

</ul>

This example creates a simple vertical list of items with default styling.

Output:

A basic list with a light background and borders separating each list item.

2. Active and Disabled Items

You can highlight specific list items by adding the .active class, and disable interactions with an item by using the .disabled class.

Example:

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

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

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

<li class="list-group-item">Fourth item</li>

</ul>

The .active class gives the item a blue background and white text.

The .disabled class greys out the item and prevents user interaction.

Output:

The "Active item" is highlighted.

The "Disabled item" is grayed out and unclickable.

3. List Group with Links

You can turn list group items into clickable links by using the <a> element with the .list-group-item class.

Example:

<a href="#" class="list-group-item list-group-item-action active">Active link</a>

<a href="#" class="list-group-item list-group-item-action">Second link</a>

<a href="#" class="list-group-item list-group-item-action disabled" aria-disabled="true">Disabled link</a>

</div>

By using the .list-group-item-action class, you make each list item interactive, like a button or link.

Output:

Each list item is now clickable and has hover effects.

The active link is highlighted in blue, while the disabled link is grayed out.

4. List Group with Buttons

Similar to links, you can make each list group item a button by using the <button> element.

Example:

<button type="button" class="list-group-item list-group-item-action active">Active button</button>

<button type="button" class="list-group-item list-group-item-action">Second button</button>

<button type="button" class="list-group-item list-group-item-action disabled" disabled>Disabled button</button>

</div>

Each button is styled the same way as other list items but can be interacted with using JavaScript for dynamic actions.

5. List Group with Badges

List groups can be paired with badges to display additional information, such as counts or status indicators, within each item.

Example:

Inbox

</li>

Sent

</li>

Drafts

</li>

</ul>

In this example, the list group items are paired with badges to indicate a count or status on the right side.

Output:

Badges appear to the right of each list item, providing additional information in a visually compact form.

6. Flush List Group

If you want a list group without any borders and padding between the items, you can use the .list-group-flush class.

Example:

</ul>

Output:

The list group will appear with no borders between the items and no padding, giving a minimalistic look.

7. Horizontal List Group

Bootstrap 5 allows you to create horizontal list groups by adding the .list-group-horizontal class. This is especially useful for navigation menus or lists that require horizontal alignment.

Example:

</ul>

Output:

The list items are displayed in a row instead of a column.

You can also use responsive variants, like .list-group-horizontal-sm, .list-group-horizontal-md, etc., to create a horizontal layout on specific breakpoints.

8. Custom Content in List Groups

List groups are not limited to just text. You can include custom HTML, like images, headings, and paragraphs, inside the .list-group-item class to create more complex list items.

Example:

<h5 class="mb-1">List group item heading</h5>

</div>

<p class="mb-1">Some placeholder content for the list group item.</p>

<small>Additional content.</small>

</a>

<h5 class="mb-1">Second list group item</h5>

</div>

<p class="mb-1">More placeholder content here.</p>

<small class="text-muted">Additional muted content.</small>

</a>

</div>

Output:

Each list item has custom content, including headings, paragraphs, and time information. This layout is perfect for blog post listings, notifications, or activity feeds.

9. List Group Colors

Bootstrap 5 provides contextual background classes to apply different colors to list group items, such as .list-group-item-primary, .list-group-item-success, .list-group-item-danger, and more.

Example:

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

<li class="list-group-item list-group-item-secondary">Secondary 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>

<li class="list-group-item list-group-item-warning">Warning item</li>

</ul>

Output:

Each list item has a different background color, making them stand out visually based on their purpose.

Conclusion

A powerful and adaptable element, Bootstrap 5 list groups may be used to present a range of items in a standardized, organized way. List groups offer a tidy and adaptable method to display information, from straightforward lists to intricate, interactive components. Building engaging and visually appealing user interfaces is made simple with Bootstrap 5 since it offers customization options for badges, colors, styling, and custom content.