Lesson 16: List Groups in Bootstrap 5

List Groups in Bootstrap 5 are a flexible and powerful component used to display a series of information on websites, apps, etc. Let's explore how to use List Groups in Bootstrap 5 with QuanTriMang.com !

 

Basic list groups in Bootstrap 5

The most basic list group in Bootstrap 5 is an unordered list of items. To create a basic list group, use the `` class .list-group, and ``.

with class .list-group-item:

1. First item
2. Second items
3. Third items

Example for the website TipsMake.com:

 

 Bootstrap Example 

Basic list group on QuanTriMang.com

1. Section 1
2. Section 2
3. Section 3

 

The item is currently active.

Use a class .activeto highlight the current item:

1. Active items
2. Second items
3. Third items

For example, on the website QuanTriMang.com:

 Bootstrap Example 

This item is currently active in the list group on QuanTriMang.com.

1. Section 1
2. Section 2
3. Section 3

 

A list group with linked items

To create a group list with linked items, use `replace`  and `instead` instead of `instead`.

Optionally, add a class .list-group-item-actionif you want the background color to turn gray when you hover your mouse over it:

 First item Second item Third item 

For example, on the website QuanTriMang.com:

 Bootstrap Example 

The list includes linked items on QuanTriMang.com.

 Mục 1 Mục 2 Mục 3 

 

Inactive item

The class .disabledadds a lighter text color to inactive items. And when used on links, it removes the hover effect.

 Disabled item Disabled item Third item 

For example, on the website QuanTriMang.com:

 Bootstrap Example 

The list contains disabled items on QuanTriMang.com.

The `disabled` class colors disabled items more lightly. And when used on links, it removes the hover effect.

 Mục bị vô hiệu hóa Mục bị vô hiệu hóa Mục 3 

 

Remove border

Use classes .list-group-flushto remove some borders and rounded corners:

1. First item
2. Second items
3. Third items
4. fourth item

For example, on the website QuanTriMang.com:

Numbered list group

Use classes .list-group-numberedto create items that are listed with numbers in front of them:

1. First item
2. Second items
3. Third items

For example, on the website QuanTriMang.com:

Horizontal list group

If you want the items in the list to display horizontally (side-by-side instead of above each other), add the .list-group-horizontalclass .list-group:

1. First item
2. Second items
3. Third items
4. fourth item

For example, on the website QuanTriMang.com:

 Bootstrap Example 

Horizontal list grouping on QuanTriMang.com

The class .list-group-horizontal displays the items in the list horizontally:

1. Section 1
2. Section 2
3. Section 3
4. Section 4

 

Context-based classes

Contextual classes can be used to add color to items in a list:

The class colors the items in the list, including: .list-group-item-success, list-group-item-secondary, list-group-item-info, list-group-item-warning, .list-group-item-danger, .list-group-item-primary, list-group-item-dark and list-group-item-light,:

1. Success item
2. Multiple items
3. Internal items
4. Missing item
5. Danger item
6. Primary item
7. Dark item
8. Light item

For example, on the website QuanTriMang.com:

 Bootstrap Example 

Contextual list grouping in QTM

1. Success
2. Additional
3. Information
4. Warning
5. Danger
6. Basic
7. Dark colors
8. Light color

Link items to classes in context.

 Action item Success item Secondary item Info item Warning item Danger item Primary item Dark item Light item 

For example, on the website QuanTriMang.com:

 Bootstrap Example 

Contextually linked items on QuanTriMang

Move your mouse over the linked items to see the cursor effect:

 Action item Success item Secondary item Info item Warning item Danger item Primary item Dark item Light item 

List group with Badge

Combine the class .badgewith the utility/helper class to add badges inside list groups:

1. Inbox 12
2. Ads 50
3. Junk 99

For example, on the website QuanTriMang.com:

Above is everything you need to know about creating list groups in Bootstrap 5. As you can see, it's very easy to create professional list groups for your website by simply changing a few elements when coding with Bootstrap 5 .