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.
<!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:
Example 2: The following code demonstrates the nested List Group Flush using the List Group Flush properties.
<!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:
Reference: https://getbootstrap.com/docs/5.0/components/list-group/#flush