We will discuss about bootstrap list group in this tutorial. List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.
The most basic list group is simply an unordered list with list items, and the proper classes. Build upon it with the options that follow, or your own CSS as needed.
- Use <ul> element with .list-group class.
- And then apply class .list-group-item to <li>.
Following example demonstrates this:
Adding Badges to List Group
You can add the badges component to any list group item and it will automatically be positioned on the right. Simply add <span class="badge"> tag within the <li> tag. Following example shows this:
Linking List Group Items
If you want to make links or clickable to list group items by using anchor tags instead of list items and also make a parent <div> instead of an <ul>. There is no need for individual parents around each element.
Add .disabled to a .list-group-item to gray it out to appear disabled.
Use contextual classes to style list items, default or linked. Also includes .active state.
Add Custom Content to List Group
You can add nearly any HTML content with in the above linked list group like the below example shows.