Bootstrap List Groups

In bootstrap, list groups are useful to display the list items with custom content i.e., list items with badges, linked items, button items, list items with different colors, etc., based on our requirements.

To create a basic list group in bootstrap, we need to use the unordered list with .list-group class and .list-group-item classes on list items like as shown below.

The above example will return the result as shown below.

Bootstrap List Group with Active / Disabled List Items

To make the list items active or disabled in the list group, we need to add .active or .disabled classes along with .list-group-item class like as shown below.

If you observe the above example, we added .active class to one list item and .disabled class to another list item in list group.

The above example will return the result as shown below.

Bootstrap List Group with Links and Buttons

To create a list group with links or buttons, we need to use <div> element instead of <ul> and <a> or <button> elements instead of <li>. In case if you want to  change the background color of list items on hover optionally, you can add .list-group-item-action class to list items.

The above example will return the result as shown below.

Same way, we can create the list group with a button (<button>) elements like as shown below. 

Bootstrap List Group with Contextual Classes

In bootstrap, we have different contextual classes such as .list-group-item-primary, .list-group-item-secondary, .list-group-item-successEtc. available to change the list items background and color in list group based on our requirements.

The above example will return the result as shown below.

Bootstrap Flush / Remove List Group Borders

By adding .list-group-flush class to <ul> element, we can remove some borders and rounded corners of the list group.

The above example will return the result as shown below.

Bootstrap Horizontal List Group

In case if you want to display the list group items horizontally (side by side) instead of vertically, then add .list-group-horizontal class <ul> element.

The above example will return the result as shown below.

Bootstrap List Group with Badges

In bootstrap list group, we can add badges to show unread counts, messages, etc., based on our requirements.

The above example will return the result as shown below.

Bootstrap List Group with Custom Content

In bootstrap list group, you can add any HTML code like heading, paragraphs, links, etc. like as shown below.

The above example will return the result as shown below.

This is how we can create the list groups with list items in bootstrap based on our requirements.