List groups in Bootstrap 5 are a flexible and powerful component for displaying a series of information. Lets explore how to use list groups in Bootstrap 5 with QuanTriMang.com!
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:
- First item
- Second items
- Third items
Example for the website TipsMake.com:
Bootstrap Example Basic list group on QuanTriMang.com
- Section 1
- Section 2
- Section 3
The item is currently active.
Use a class .activeto highlight the current item:
- Active items
- Second items
- Third items
For example, on the website QuanTriMang.com:
Bootstrap Example This item is currently active in the list group on QuanTriMang.com.
- Section 1
- Section 2
- 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:
- First item
- Second items
- Third items
- 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:
- First item
- Second items
- 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:
- First item
- Second items
- Third items
- 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:
- Section 1
- Section 2
- Section 3
- 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,:
- Success item
- Multiple items
- Internal items
- Missing item
- Danger item
- Primary item
- Dark item
- Light item
For example, on the website QuanTriMang.com:
Bootstrap Example Contextual list grouping in QTM
- Success
- Additional
- Information
- Warning
- Danger
- Basic
- Dark colors
- 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:
- Inbox 12
- Ads 50
- 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 .