Bootstrap 5 List group Horizontal

Bootstrap 5 List group Horizontal facilitates to modification & alignment of the structure of the list group items from vertical to horizontal, across all breakpoints, by implementing the .list-group-horizontal class. In order to create a list group horizontal that starts with the min-width of the breakpoint, we can implement the .list-group-horizontal-{sm|md|lg|xl|xxl} class to make a responsive variant.

List Group Horizontal Classes:

• list-group-horizontal: This class is used to make items of the list appear horizontally aligned.
• list-group-horizontal-{sm|md|lg|xl|xxl}: This class is used to add responsiveness to the items.

Note: Bootstrap 5 flex-fill class is used to add an equal-width list of group items horizontally by specifying it with each list group item.

Syntax: The * can be replaceable with sm, md, lg, xl, and xxl.

<ul class="list-group list-group-horizontal-*">
 <li class="list-group-item">...</li>
 <li class="list-group-item">...</li>
</ul>

Note: The horizontal list groups cannot be combined with flush list groups.

Example 1: This example describes the basic usage of the List Group Horizontal in Bootstrap5 by specifying the List Group Horizontal Item properties.

Output:

👁 Image

Example 2: The following code demonstrates the List Group Horizontal items with responsiveness.

Output:

👁 Image

Reference: https://getbootstrap.com/docs/5.0/components/list-group/#horizontal