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.
<!DOCTYPE html>
<html>
<head>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
</head>
<body>
<h1 class="text-success">
GeeksforGeeks
</h1>
<h2>
Bootstrap 5 List group Horizontal
</h2>
<ul class="list-group list-group-horizontal">
<li class="list-group-item">Hello</li>
<li class="list-group-item">Geek</li>
<li class="list-group-item">GeeksforGeeks</li>
</ul>
<ul class="list-group list-group-horizontal-sm">
<li class="list-group-item">Bootstrap 5</li>
<li class="list-group-item">List Group</li>
<li class="list-group-item">Horizontal</li>
</ul>
</body>
</html>
Output:
Example 2: The following code demonstrates the List Group Horizontal items with responsiveness.
<!DOCTYPE html>
<html>
<head>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
</head>
<body>
<h1 class="text-success"> GeeksforGeeks </h1>
<h2> Bootstrap 5 List group Horizontal </h2>
<h5>
Responsiveness for smaller screen size
greater than 576px and smaller than 768px
</h5>
<ul class="list-group list-group-horizontal-sm">
<li class="list-group-item">Welcome</li>
<li class="list-group-item">to</li>
<li class="list-group-item">GeeksforGeeks</li>
<li class="list-group-item">Portal</li>
</ul>
<h5>
Responsiveness for smaller screen size
greater than 768px and smaller than 992px
</h5>
<ul class="list-group list-group-horizontal-md">
<li class="list-group-item">DSA</li>
<li class="list-group-item">Web tech</li>
<li class="list-group-item">Programming Languages</li>
<li class="list-group-item">Aptitude</li>
</ul>
<h5>
Responsiveness for smaller screen size
greater than 992px and smaller than 1200px
</h5>
<ul class="list-group list-group-horizontal-lg">
<li class="list-group-item">Computer Network</li>
<li class="list-group-item">Cyber Security</li>
<li class="list-group-item">Data Mining</li>
</ul>
<h5>
Responsiveness for smaller screen size greater
than 1200px and smaller than 1400px
</h5>
<ul class="list-group list-group-horizontal-xl">
<li class="list-group-item">GeeksforGeeks</li>
<li class="list-group-item">Learning Together</li>
</ul>
<h5>Responsiveness for smaller screen size greater than 1400px </h5>
<ul class="list-group list-group-horizontal-xxl">
<li class="list-group-item">DDA</li>
<li class="list-group-item">OS</li>
<li class="list-group-item">DBMS</li>
<li class="list-group-item">Computer Network</li>
</ul>
</body>
</html>
Output:
Reference: https://getbootstrap.com/docs/5.0/components/list-group/#horizontal