Create responsive website with Bootstrap

Bootstrap List Groups

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.

The class ".list-group" within the <ul> element and the class ".list-group-item" within the <li>element are used to create a basic list group.

Basic List Groups

List Group with Badges

The badges can also be added to a list group. They will automatically be positioned to the right side.

You have to create a <span> element with class ".badge" inside the list item to create a badge.

Bootstrap List Groups with Hyperlinks

You can also link items to the list group. This provides a grey background color on hover.

Bootstrap List Group: Display active item

The class ".active" is used to highlight the current item. It specifies that the specific item is in active state.

Bootstrap List Group: Display a disable item

The class ".disabled" is used to disable a specific item in the list group.

Bootstrap List Group: Contextual Classes

You can add colors to the list items by using contextual classes.

• .list-group-item-success
• .list-group-item-info
• .list-group-item-warning
• .list-group-item-danger