Bootstrap 5 List group Flush

Bootstrap 5 provides the List Group Flush feature in which items are stored in the form of a list. List groups are a flexible and powerful component for displaying a series of content. The List Group Flush feature is used to remove borders and rounded corners around the items on the list.

List group Flush Class:

list-group-flush: This class is used to remove the borders and rounded corners around the items.

Syntax:

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

Example 1: The following code demonstrates the List Group Flush using the List Group Flush 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 Flush</h2>
    <ul class="list-group list-group-flush">
        <li class="list-group-item">Hello</li>
        <li class="list-group-item">Geek</li>
        <li class="list-group-item">GeeksforGeeks</li>
    </ul>
</body>

</html>

Output:

Example 2: The following code demonstrates the nested List Group Flush using the List Group Flush 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 Nested List Group using Flush</h2>
    <ul class="list-group">
        <li class="list-group-item">
            <ul class="list-group list-group-flush">
                <li class="list-group-item">C++</li>
                <li class="list-group-item">C</li>
                <li class="list-group-item">JavaScript</li>
            </ul>
        </li>
        <li class="list-group-item">Geek</li>
        <li class="list-group-item">GeeksforGeeks</li>
    </ul>
</body>

</html>

Output:

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

Bootstrap 5 List group Flush

Explore