List group in bootstrap with examples

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:
list groups basic output

Active List Items

Add .active class to list item to indicate that it is the current active item.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:
list group buttons

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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:
list group flush

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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:
list group contextual classes

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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:
list group badges

Reference:



My Personal Notes arrow_drop_up


If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.