Bootstrap 4 Components
List Groups
List groups are flexible and powerful components for displaying a series of content. They are basically an unordered list with class .list-group and list items with class .list-group-item.
Let’s see an example.
- List group item 1
- List group item 2
- List group item 3
- List group item 4
- List group item 5
Active Items
You can indicate the active state of a list group item by adding .active to any .list-group-item.
- List group item 1
- List group item 2
- List group item 3
- List group item 4
- List group item 5
Disabled Items
Use .disable with .list-group-item to disable that particular list group item.
- List group item 1
- List group item 2
- List group item 3
- List group item 4
- List group item 5
Links and Buttons
You can add <a> and <button> elements to the list group. Add hover, disabled and active states by adding the class .list-group-item-action.
- List group item 1 List group item 2 List group item 3 List group item 4 List group item 5
Contextual Class
You can use contextual classes to style list items. Add .list-group-item-* to .list-group-item to achieve this.
- List group item 1 List group item 2 List group item 3 List group item 4 List group item 5
Badges
Use badges to add tags to the list items using .badge and other utility classes.
- Unread messages 14
- Notifications 2
- Updates 1
Custom Content
You can add HTML content also inside the list group, with the help of flexbox utilities.
List group item heading
3 days agoDonec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.List group item heading
3 days agoDonec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.List group item heading
3 days agoDonec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.