List group in bootstrap with examples

List Groups are used to display a series of content. We can modify them to support any content as per our needs. The use of List-Groups is just to display a series or list of content in an organized way. 

Below is a basic List Group created using unordered_lists in HTML, and appropriate Bootstrap classes:

Output:

👁 list groups basic output

Active List Items: Add .active class to the list item to indicate that it is the currently active item.

Output:

👁 list group active item

Disabled List Items: Add .disabled class to a list item to indicate it is disabled. When the content to be disabled is a link/button, we may need to add custom javascript code to disable items completely.

Output:

👁 list group disabled item

Hyperlinks and Buttons: Use .list-group-item-action class to create actionable list items with hover, disabled and active states.

Output:

👁 list group buttons

Flush: Use the Flush class to remove some borders and rounded corners, so that it looks good in the parent container. 

Output:

👁 list group flush

Contextual Classes: Use contextual classes to style list items with suitable background and color.

Output:

👁 list group contextual classes

Badges: We can add badges to list group items as shown below:

Output:

👁 list group badges

Supported Browser:

• Google Chrome
• Microsoft Edge
• Firefox
• Opera
• Safari

Reference:

• Badges and breadcrumbs.
• List groups Bootstrap.