List Group In Bootstrap With Examples

Posted By Bajarangi soft , Posted On 12-10-2020

List Groups are used to display series of content. We can modify them as 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 organised way.

Below is a basic List Group created using Un order lis in html, and appropriate Bootstrap classes:
Add .active class to list item to indicate that it is the current active item.
Example-1

<!DOCTYPE html>
<head>
    <title>List Groups example</title>

    <!-- Link Bootsrap 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>

Add .disabled class to list item to indicate it is disabled. When content to be disabled is link/button, we may need to add custom javascript code to disable items completely.
Example-2

<!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>

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

<!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>

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

<!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>

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

<!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 list-group-item-action">
        Basic list group item
        <span class="badge badge-pill badge-warning">2</span>
    </li>
    <li class="list-group-item
         list-group-item-primary list-group-item-action">
        Primary list group item
        <span class="badge badge-pill badge-success">9</span>
    </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>

Related Post

What Are The Route Groups In Laravel Framework With Example
How To Create A Bootstrap Alert To Show Up
How To Create An Active and Disable Buttons and in Bootstrap?
How To Create An Button groups In Bootstrap
Which Group Is Used To Badges In Bootstrap
Which Class Creates a List of Groups In Bootstrap 4
What Is The Input Groups In Bootstrap 4
Input Groups In Bootstrap With Examples
How To Create Button Groups Using Cascading Style Sheets