Bootstrap 4 List groups

This article will understand how to create list groups in bootstrap 4.

What do you mean by List groups in bootstrap 4?

In bootstrap 4, List Groups display a series of content. List-Groups are used to display a series or a list of organized content.

Following are the various examples of Bootstrap 4 list groups.

Example 1: Bootstrap 4 Horizontal list group item

Explanation:

In the above example, we created an example of the .list-group-horizontal class. This class displays the list of items horizontally.

Output:

Following is the output of this example.

Example 2: Bootstrap 4 vertical list group item

Explanation:

In the above example, we created an example of a vertical list group item. In this list, the item is displayed as a vertical group.

Output:

Following is the output of this example.

Example 3: Bootstrap 4 List groups with buttons

Explanation:

We created an example bootstrap 4 list group items with buttons in the above example. In this, we have used list items like a button.

Output:

Following is the output of this example.

Example 4: List Groups with Images

Explanation:

In the above example, we created an example of list group with images.

Output:

Following is the output of this example.

Example 5: Bootstrap 4 List groups with links

Explanation:

We created an example bootstrap 4 list group items with links in the above example. In this, we have used list items as a link.

Output:

Following is the output of this example.