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.

Example:

Test it Now
Next TopicBootstrap Dropdown




Please Share

facebook twitter google plus pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA