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 =
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
Share your thoughts in the comments
Please Login to comment...