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.

To create a basic list group, use an <ul> element with class .list-group, and <li> elements with class .list-group-item:

Example -

List Group With Badges

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:

Example -

Bootstrap List Groups with Hyperlinks

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.

Example -

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.

Example -

Disabled Item

To disable an item, add the .disabled class:

Example -

Bootstrap List Group: Contextual Classes

You can add colors to the list items by using contextual classes.The following classes are used for coloring list items:

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

Example -

Contextual Classes

The classes for coloring list-items are: .list-group-item-success, list-group-item-info, list-group-item-warning, and .list-group-item-danger:

Example -