Bootstrap 5 List group Horizontal

Last Updated : 20 Jan, 2023

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.

HTML

<!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.

HTML

<!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>