Bootstrap 5 List group Custom content
Bootstrap 5 List Group Custom content allows us to use HTML inside the list, here, the term “Custom Content” refers to HTML, therefore any HTML elements can be used inside, including anchor tags, paragraph tags, divs, photos, and many more.
Bootstrap 5 List Group Custom content Classes: There is no predefined class to create custom content on the List group, we can use any Bootstrap 5 utilities, flex-box utilities, or Bootstrap 5 Icons.
Syntax:
<div class="list-group">
<div class="list-group-item">
...
</div>
</div>
Below examples illustrate the Bootstrap 5 List group Custom content:
Example 1: The following code demonstrates the List Group Custom Content using the List Group Custom Content properties.
HTML
<!DOCTYPE html> <html> <head> <link href= rel="stylesheet" integrity= "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> </head> <body class="ms-2 me-2"> <h1 class="text-success">GeeksforGeeks </h1> <h2>Bootstrap 5 List Group Custom Content</h2> <ul class="list-group"> <div class="list-group-item"> <small>Hi Geek!</small> <p>Welcome to GeeksforGeeks</p> </div> <div class="list-group-item"> Bootstrap 5 is awesome </div> <div class="list-group-item"> Here we are learning List Group Custom Content </div> </ul> </body> </html> |
Output:
Bootstrap 5 List group Custom content
Example 2: The following code demonstrates the List Group Custom Content to add links using the List Group Custom Content properties.
HTML
<!DOCTYPE html> <html> <head> <link href= rel="stylesheet" integrity= "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> </head> <body class="ms-2 me-2"> <h1 class="text-success">GeeksforGeeks </h1> <h2>Bootstrap 5 List Group Custom Content</h2> <ul class="list-group"> class="list-group-item active"> <small>Hi Geek!</small> <p>Click on this item</p> </a> <div class="list-group-item"> <p>Click on the image to visit GFG</p> <img src= alt="GFG" width="50" height="50"> </a> </div> </ul> </body> </html> |
Output:
Bootstrap 5 List group Custom content
Reference: https://getbootstrap.com/docs/5.0/components/list-group/#custom-content
Please Login to comment...