Javatpoint Logo
Javatpoint Logo

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.

Bootstrap List Group Example

Test it Now

Bootstrap 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.

Test it Now

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.

Test it Now

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.

Test it Now

Bootstrap List Group: Display a disable item

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

Test it Now

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
Test it Now

Link items with Contextual Classes

In Bootstrap 4, you can also link items with contextual classes.


Test it Now
Next TopicBootstrap Dropdown

Youtube For Videos Join Our Youtube Channel: Join Now


Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Trending Technologies

B.Tech / MCA