Open In App

Bootstrap 5 List group Custom content

Improve
Improve
Like Article
Like
Save
Share
Report

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

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">
        <a href="https://www.geeksforgeeks.org/"
           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>
            <a href="https://www.geeksforgeeks.org/">
                <img src=
                     alt="GFG" width="50" height="50">
            </a>
        </div>
    </ul>
</body>
  
</html>


Output:

Bootstrap 5  List group Custom content

Bootstrap 5  List group Custom content

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



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