List group in bootstrap with examples

Last Updated : 11 Jul, 2025

List Groups are used to display a series of content. We can modify them to support any content as per our needs. The use of List-Groups is just to display a series or list of content in an organized way. 

Below is a basic List Group created using unordered_lists in HTML, and appropriate Bootstrap classes:

HTML 
<!DOCTYPE html>
<html>
<head>
    <title>List Groups example</title>
    <!-- Link Bootstrap Files -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" 
        integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" 
        crossorigin="anonymous">
    <script src=
"https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
    </script>
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" 
        integrity=
"sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" 
        crossorigin="anonymous">
    </script>
</head>
<body>
    
<p>To do list</p>

    <ul class="list-group">
        <li class="list-group-item">study</li>
        <li class="list-group-item">pay bills</li>
        <li class="list-group-item">call mom</li>
        <li class="list-group-item">drop an email</li>
    </ul>
</body>
</html>

Output:

list groups basic output
Active List Items: Add .active class to the list item to indicate that it is the currently active item.

HTML 
<!DOCTYPE html>
<html>
<head>
    <title>List Groups example</title>
    <!-- Link Bootstrap Files -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" 
        integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" 
        crossorigin="anonymous">
    <script src=
"https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
    </script>
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" 
        integrity=
"sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" 
        crossorigin="anonymous">
    </script>
</head>
<body>
    
<p>To do list</p>

    <ul class="list-group">
        <li class="list-group-item active">study</li>
        <li class="list-group-item">pay bills</li>
        <li class="list-group-item">call mom</li>
        <li class="list-group-item">drop an email</li>
    </ul>
</body>
</html>

Output:

list group active item
Disabled List Items: Add .disabled class to a list item to indicate it is disabled. When the content to be disabled is a link/button, we may need to add custom javascript code to disable items completely.

HTML 
<!DOCTYPE html>
<html>
<head>
    <title>List Groups example</title>
    <!-- Add Bootstrap Links -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" 
        integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" 
        crossorigin="anonymous">
    <script src=
"https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
    </script>
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" 
        integrity=
"sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" 
        crossorigin="anonymous">
    </script>
</head>
<body>
    
<p>To do list</p>

    <ul class="list-group">
        <!-- Using the disabled bootstrap class on below 
            List Item will make it faded -->
        <li class="list-group-item disabled">study</li>
        <li class="list-group-item">pay bills</li>
        <li class="list-group-item">call mom</li>
        <li class="list-group-item">drop an email</li>
    </ul>
</body>
</html>

Output:

list group disabled item
Hyperlinks and Buttons: Use .list-group-item-action class to create actionable list items with hover, disabled and active states.

HTML 
<!DOCTYPE html>
<html>
<head>
    <title>List Groups example</title>
    <!-- Add Bootstrap Links -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" 
        integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" 
        crossorigin="anonymous">
    <script src=
"https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
    </script>
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" 
        integrity=
"sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" 
        crossorigin="anonymous">
    </script>
</head>
<body>
    
<p>Social Networks</p>

    <ul class="list-group">
        <a href="#" class="list-group-item 
            list-group-item-action">Google</a>
        <a href="#" class="list-group-item 
            list-group-item-action active">Facebook</a>
        <a href="#" class="list-group-item 
            list-group-item-action disabled">Twitter</a>
        <a href="#" class="list-group-item 
            list-group-item-action">LinkedIn</a>
    </ul>
</body>
</html>

Output:

list group buttons

Flush: Use the Flush class to remove some borders and rounded corners, so that it looks good in the parent container. 

HTML 
<!DOCTYPE html>
<html>
<head>
    <title>List Groups Example</title>
    <!-- Add important Bootstrap Links -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" 
        integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" 
        crossorigin="anonymous">
    <script src=
"https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
    </script>
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" 
        integrity=
"sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" 
        crossorigin="anonymous">
    </script>
</head>
<body>
    
<p>To do lists</p>

    <ul class="list-group list-group-flush">
        <li class="list-group-item">study</li>
        <li class="list-group-item">pay bills</li>
        <li class="list-group-item">call mom</li>
        <li class="list-group-item">drop an email</li>
    </ul>
</body>
</html>

Output:

list group flush

Contextual Classes: Use contextual classes to style list items with suitable background and color.

HTML 
<!DOCTYPE html>
<html>
<head>
    <title>List Groups example</title>
    <!-- Add Bootstrap Links -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" 
        integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" 
        crossorigin="anonymous">
    <script src=
"https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
    </script>
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" 
        integrity=
"sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" 
        crossorigin="anonymous">
    </script>
</head>
<body>
    <ul class="list-group">
        <li class="list-group-item">
            Basic list group item
        </li>
        <li class="list-group-item 
            list-group-item-primary">
            Primary list group item
        </li>
        <li class="list-group-item 
            list-group-item-secondary">
            Secondary list group item
        </li>
        <li class="list-group-item 
            list-group-item-success">
            Success list group item
        </li>
        <li class="list-group-item 
            list-group-item-danger">
            Danger list group item
        </li>
        <li class="list-group-item 
            list-group-item-warning">
            Warning list group item
        </li>
        <li class="list-group-item 
            list-group-item-info">
            Info list group item
        </li>
        <li class="list-group-item 
            list-group-item-light">
            Light list group item
        </li>
        <li class="list-group-item 
            list-group-item-dark">
            Dark list group item
        </li>
    </ul>
</body>
</html>

Output:

list group contextual classes

Badges: We can add badges to list group items as shown below:

HTML 
<!DOCTYPE html>
<html>
<head>
    <title>Badge Example</title>
    <!-- Adding Bootstrap Classes -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" 
        integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" 
        crossorigin="anonymous">
    <script src=
"https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
    </script>
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" 
        integrity=
"sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" 
        crossorigin="anonymous">
    </script>
</head>
<body>
    <div class="list-group">
        <button type="button" 
                class="list-group-item list-group-item-action">
            NOTIFICATIONS
            <span class="badge badge-pill badge-light">2</span>
        </button>
        <button type="button" 
                class="list-group-item list-group-item-action">
            MESSAGES
            <span class="badge badge-pill badge-warning">2</span>
        </button>
        <button type="button" 
                class="list-group-item list-group-item-action">
            UPDATES
            <span class="badge badge-pill badge-danger">2</span>
        </button>
        <button type="button" 
                class="list-group-item list-group-item-action">
            NEWS
            <span class="badge badge-pill badge-success">2</span>
        </button>
    </div>
</body>
</html>

Output:

list group badges

Supported Browser:

  • Google Chrome
  • Microsoft Edge
  • Firefox
  • Opera
  • Safari

Reference:

Comment
Article Tags:
Bootstrap

Explore