Open In App

Bootstrap 5 List group Flush

Improve
Improve
Like Article
Like
Save
Share
Report

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=
          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:

List Group Flush

Example 2: The following code demonstrates the nested List Group Flush using the List Group Flush properties.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link href=
          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:

Nested List Group using Flush

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



Last Updated : 24 Nov, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads