BOOTSTRAP4 LIST GROUP

List group is very useful and powerfull component of bootstrap4. It is used to display a series of content, or a list of items in beautifull manner.

Basic list group

List group is nothing but an unordered list with class .list-group and list items with class .list-group-item

Links And Buttons in List Group

You can add <a> tags and <button> tags to the list items.

It is not necessary to use unordered list to create list group in bootstrap, you can use div tag as well with .list-group class.

To create actionable list group item add .list-group-item-action class to the <a> tag or <button> tag.

Do not use .btn class with buttons in list group.

List Items With Badges

You can add badges to list group item to show number of unread counts.

To create a badge use .badge class, to add color code to the badge use .badge-* where is color code and add class .badge-pill to make it in shape of pill.

List Group with Contextual classes

You can use contextual classes also with list group. Contextual classes creates statefull background and color.

Look at the example below:

Bootstrap list-group horizontal

To create horizontal bootstrap list group just add flex-direction: row to .list-group class.

Points to remember:

1. In bootstrap, list group is a collection of items in a beautiful manner
2. To create a basic list group use unordered list with class .list-group and items with .list-group-item
3. To make list group horizontal just add flex-direction: row to .list-group class.