”;
What is a list group?
List group is a versatile component that allows you to display a list of items in a well-organized and visually appealing manner. List group is often used to present a collection of related content, such as a set of articles, comments, or user profiles.
The Bootstrap provides a set of classes that can be used to add and customize the list groups:
| class | description |
|---|---|
| .list-group | Applied to the <ul> element to create a list group container |
| .list-group-item | Applied to the <li> elements to style them as list group items |
| .list-group-item-action | This class makes list group items appear interactive and responsive to user interactions |
| .active | This class sets an item active in the list |
| .disabled | This class makes an item disabled in the list |
| .list-group-item-{color} | Customizes the background color of list group items |
| .list-group-item-{color}-text | Customizes the color of the text of list group items |
| .list-group-item-{color}-active | Highlights the selected item with the specified background color |
| .list-group-flush | Removes the border and border-radius of list group items |
Some of the examples of list groups is as follows:
| Example | Description | Download link |
|---|---|---|
| List group basic | This example shows the structure of a basic list group. | Download |
| List group active/disabled item | This example shows the structure of a list group showing the active and disabled item. | Download |
| List group as link & button | This example shows the structure of a list group with links and buttons. | Download |
| Numbered list group | This example shows the structure of a numbered list group. | Download |
| List group with badges | This example shows the structure of a list group with badges. | Download |
| Horizontal list group | This example shows the structure of a horizontal list group. | Download |
| List group with radio buttons & checkboxes | This example shows the structure of a list group with radio buttons and checkboxes. | Download |
Advertisements
”;