Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

List group in bootstrap with examples

  • Last Updated : 05 Aug, 2021

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 unordered_lists in HTML, and appropriate Bootstrap classes
 

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

html




<!DOCTYPE html>
<head>
    <title>List Groups example</title>
     
    <!-- Link Bootstrap Files -->
    <link rel="stylesheet"
          integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI7
                     06tWS" crossorigin="anonymous">
            integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1P
                       i6jizo" crossorigin="anonymous"></script>
            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 list item to indicate that it is the current active item. 
 



html




<!DOCTYPE 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-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI7
                     06tWS" crossorigin="anonymous">
            integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtT
                       E1Pi6jizo" crossorigin="anonymous"></script>
            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 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. 
 

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-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYb
                     I706tWS" crossorigin="anonymous">
            integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRv
                       H+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
            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-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tW
                     S" crossorigin="anonymous">
            integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6
                       jizo" crossorigin="anonymous"></script>
            integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlA
                       Xv9k" 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 Flush class to remove some borders and rounded corners, so that it looks good in 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-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI
                     706tWS" crossorigin="anonymous">
            integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1
                       Pi6jizo" crossorigin="anonymous"></script>
            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-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI70
                     6tWS" crossorigin="anonymous">
            integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6
                       jizo" crossorigin="anonymous"></script>
            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-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706
                     tWS" crossorigin="anonymous">
            integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6
                       jizo" crossorigin="anonymous"></script>
            integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBh
                       lAXv9k" 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
 

 




My Personal Notes arrow_drop_up
Recommended Articles
Page :