Bootstrap list group is used to create a group of list with list items. The most basic list group is an unordered list containing list items.
To create a basic list group, use an <ul>
element with class .list-group
, and
<li>
elements with class .list-group-item
:
You can also add badges to a list group. The badges will automatically be positioned on the right:
To create a badge, create a <span>
element with class .badge
inside the list item:
You can also link items to the list group. This provides a grey background color on hover. You have to use <div> instead of <ul> and <a> instead of <li> element to create a list group with linked items.
The class ".active" is used to highlight the current item. It specifies that the specific item is in active state.
To disable an item, add the .disabled
class:
You can add colors to the list items by using contextual classes.The following classes are used for coloring list items:
The classes for coloring list-items are:
.list-group-item-success
, list-group-item-info
,
list-group-item-warning
, and .list-group-item-danger
: