In bootstrap list groups are used to show lists of item and links in a sequence. Bootstrap classes used to make components responsive.
Example of List groups
In this example list-group is inserted for the list group
and list-group-item is inserted for inner items.
<ulclass="list-group"><liclass="list-group-item">Item A</li><liclass="list-group-item">Item B</li><liclass="list-group-item">Item C</li><liclass="list-group-item">Item D</li><liclass="list-group-item">Item E</li></ul>
Output of above code
- Item A
- Item B
- Item C
- Item D
- Item E
Active item
In this example active class is used to make an
item active from list.
<ulclass="list-group"><liclass="list-group-item active">Item A</li><liclass="list-group-item">Item B</li><liclass="list-group-item">Item C</li><liclass="list-group-item">Item D</li><liclass="list-group-item">Item E</li></ul>
Output of above code
- Item A
- Item B
- Item C
- Item D
- Item E
Disabled items
In this example disabled class is used to make
an item disabled for list.
<ulclass="list-group"><liclass="list-group-item">Item A</li><liclass="list-group-item disabled">Item B</li><liclass="list-group-item disabled">Item C</li><liclass="list-group-item">Item D</li><liclass="list-group-item">Item E</li></ul>
Output of above code
- Item A
- Item B
- Item C
- Item D
- Item E
Linked items
In this group list-group-item-action class is used
to make linked item.
<divclass="list-group"><ahref="#"class="list-group-item list-group-item-action">Item A</a><ahref="#"class="list-group-item list-group-item-action">Item B</a><ahref="#"class="list-group-item list-group-item-action">Item C</a><ahref="#"class="list-group-item list-group-item-action">Item D</a></div>
Output of above code
Contextual List Groups
In this group bootstrap contextual classes are used to apply different background colors.
<ulclass="list-group"><liclass="list-group-item list-group-item-primary">Success item A</li><liclass="list-group-item list-group-item-secondary">Secondary item B</li><liclass="list-group-item list-group-item-info">Info item C</li><liclass="list-group-item list-group-item-warning">Warning item D</li><liclass="list-group-item list-group-item-danger">Danger item E</li><liclass="list-group-item list-group-item-success">Primary item F</li><liclass="list-group-item list-group-item-dark">Dark item G</li><liclass="list-group-item list-group-item-light">Light item H</li></ul>
Output of above code
- Success item A
- Secondary item B
- Info item C
- Warning item D
- Danger item E
- Primary item F
- Dark item G
- Light item H
Remove borders
In this example list-group-flush class is used
to remove borders of list group.
<ulclass="list-group list-group-flush"><liclass="list-group-item">Item A</li><liclass="list-group-item">Item B</li><liclass="list-group-item">Item C</li><liclass="list-group-item">Item D</li><liclass="list-group-item">Item E</li></ul>
Output of above code
- Item A
- Item B
- Item C
- Item D
- Item E
The Best
Comment here
If you have any query, if you want to know something about any of technical course related to computer science field, if you have any suggestion about relevant to uploaded content or if you anything wrong here (any mistake in content) than please contact us. Keep in mind, comment should be according to community guidelines.
