Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Bootstrap 4 | List Groups

  • Last Updated : 28 Jul, 2021

List Groups are used to display a series of content in an organized way. Use .list-group and .list-group-item classes to create a list of items. The .list-group class is used with <ul> element and .list-group-item is used with <li> element.

Example:  

html




<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap List Group</title>
     
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <link rel="stylesheet" href=
     
    <script src=
    </script>
     
    <script src=
    </script>
     
    <script src=
    </script>
</head>
 
<body>
    <h1 style="color:green;text-align:center;">
        GeeksforGeeks
    </h1>
     
     
    <div class="container">
        <h2>List Groups</h2>
         
        <ul class="list-group">
            <li class="list-group-item">Data Structure</li>
            <li class="list-group-item">Operating System</li>
            <li class="list-group-item">Algorithm</li>
        </ul>
    </div>
</body>
 
</html>                   

Output: 
 

Active list item: The .active class is used to highlight the current item. 
Example: 
 



html




<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap List Group</title>
     
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <link rel="stylesheet" href=
     
    <script src=
    </script>
     
    <script src=
    </script>
     
    <script src=
    </script>
</head>
 
<body>
    <h1 style="color:green;text-align:center;">
        GeeksforGeeks
    </h1>
     
     
    <div class="container">
        <h2>List Groups</h2>
         
        <ul class="list-group">
            <li class="list-group-item active">Data Structure</li>
            <li class="list-group-item">Operating System</li>
            <li class="list-group-item">Algorithm</li>
        </ul>
    </div>
</body>
 
</html>                   

Output: 
 

List Group With Linked Items: Use <div> and <a> tag instead of <ul> and <li> to create a list of group with linked items. The .list-group-item-action class is used to set the hover effect to change the background color to gray.
Example: 
 

html




<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap List Group</title>
     
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <link rel="stylesheet" href=
     
    <script src=
    </script>
     
    <script src=
    </script>
     
    <script src=
    </script>
</head>
 
<body>
    <h1 style="color:green;text-align:center;">
        GeeksforGeeks
    </h1>
     
     
    <div class="container">
        <h2>List Groups</h2>
         
        <div class="list-group">
            <a href="#" class="list-group-item list-group-item-action">
                Data Structure
            </a>
             
            <a href="#" class="list-group-item list-group-item-action">
                Operating System
            </a>
             
            <a href="#" class="list-group-item list-group-item-action">
                Algorithm
            </a>
        </div>
    </div>
</body>
 
</html>                   

Output: 
 

Disabled Item: The .disabled class is used to disable the text content. This class set the text color to light. When used on links, it will remove the hover effect.
Example: 
 

html




<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap List Group</title>
     
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <link rel="stylesheet" href=
     
    <script src=
    </script>
     
    <script src=
    </script>
     
    <script src=
    </script>
</head>
 
<body>
    <h1 style="color:green;text-align:center;">
        GeeksforGeeks
    </h1>
     
     
    <div class="container">
        <h2>List Groups</h2>
         
        <div class="list-group">
            <a href="#" class="list-group-item disabled">
                Data Structure
            </a>
             
            <a href="#" class="list-group-item">
                Operating System
            </a>
             
            <a href="#" class="list-group-item disabled">
                Algorithm
            </a>
        </div>
    </div>
</body>
 
</html>                   

Output: 
 



Flush/Remove Borders: The .list-group-flush class is used to remove some borders and rounded corners.
Example: 
 

html




<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap List Group</title>
     
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <link rel="stylesheet" href=
     
    <script src=
    </script>
     
    <script src=
    </script>
     
    <script src=
    </script>
</head>
 
<body>
    <h1 style="color:green;text-align:center;">
        GeeksforGeeks
    </h1>
     
    <div class="container">
        <h2>List Groups</h2>
         
        <ul class="list-group list-group-flush">
             
            <li class="list-group-item">
                Data Structure
            </li>
             
            <li class="list-group-item">
                Operating System
            </li>
             
            <li class="list-group-item">
                Algorithm
            </li>
        </ul>
    </div>
</body>
 
</html>                   

Output: 
 

Horizontal List Groups: The .list-group-horizontal class is used to display the list of items horizontally instead of vertically.
Example: 
 

html




<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap List Group</title>
     
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <link rel="stylesheet" href=
     
    <script src=
    </script>
     
    <script src=
    </script>
     
    <script src=
    </script>
</head>
 
<body>
    <h1 style="color:green;text-align:center;">
        GeeksforGeeks
    </h1>
     
    <div class="container">
        <h2>List Groups</h2>
         
        <ul class="list-group list-group-horizontal">
             
            <li class="list-group-item">
                Data Structure
            </li>
             
            <li class="list-group-item">
                Operating System
            </li>
             
            <li class="list-group-item">
                Algorithm
            </li>
        </ul>
    </div>
</body>
 
</html>                   

Output: 
 

Contextual Classes: It is used to set the color to the list of items. The classes for coloring the list-items are: .list-group-item-success, .list-group-item-secondary, .list-group-item-info, .list-group-item-warning, .list-group-item-danger, .list-group-item-primary, .list-group-item-dark and .list-group-item-light.
Example: 
 

html




<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap List Group</title>
     
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <link rel="stylesheet" href=
     
    <script src=
    </script>
     
    <script src=
    </script>
     
    <script src=
    </script>
</head>
 
<body>
    <h1 style="color:green;text-align:center;">
        GeeksforGeeks
    </h1>
     
    <div class="container">
        <h2>List Groups</h2>
         
        <ul class="list-group">
             
            <li class="list-group-item list-group-item-primary">
                Data Structure
            </li>
             
            <li class="list-group-item list-group-item-secondary">
                Operating System
            </li>
             
            <li class="list-group-item list-group-item-success">
                Algorithm
            </li>
             
            <li class="list-group-item list-group-item-warning">
                DBMS
            </li>
             
            <li class="list-group-item list-group-item-danger">
                Web Technology
            </li>
        </ul>
    </div>
</body>
 
</html>                   

Output: 
 

Link items with Contextual Classes: The contextual classes can be used with list of items.
Example: 
 

html




<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap List Group</title>
     
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <link rel="stylesheet" href=
     
    <script src=
    </script>
     
    <script src=
    </script>
     
    <script src=
    </script>
</head>
 
<body>
    <h1 style="color:green;text-align:center;">
        GeeksforGeeks
    </h1>
     
    <div class="container">
        <h2>List Groups</h2>
         
        <div class="list-group">
             
            <a href="#"
               class="list-group-item list-group-item-primary">
                Data Structure
            </a>
             
            <a href="#"
               class="list-group-item list-group-item-secondary">
                Operating System
            </a>
             
            <a href="#"
               class="list-group-item list-group-item-success">
                Algorithm
            </a>
             
            <a href="#"
               class="list-group-item list-group-item-warning">
                DBMS
            </a>
             
            <a href="#"
               class="list-group-item list-group-item-danger">
                Web Technology
            </a>
        </div>
    </div>
</body>
 
</html>                   

Output: 
 

List Group with Badges: The .badge class can be combined with utility class to add badges inside the list of group.
Example: 
 

html




<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap List Group</title>
     
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <link rel="stylesheet" href=
     
    <script src=
    </script>
     
    <script src=
    </script>
     
    <script src=
    </script>
</head>
 
<body>
    <h1 style="color:green;text-align:center;">
        GeeksforGeeks
    </h1>
     
     
    <div class="container">
        <h2>List Groups</h2>
         
        <ul class="list-group">
            <li class="list-group-item d-flex justify-content-between
                align-items-center ">Data Structure
                <span class="badge badge-success">10</span>
            </li>
             
            <li class="list-group-item d-flex justify-content-between
                align-items-center">Computer Network
                <span class="badge badge-success">23</span>
            </li>
             
            <li class="list-group-item d-flex justify-content-between
                align-items-center">Operating System
                <span class="badge badge-success">39</span>
            </li>
        </ul>
    </div>
</body>
 
</html>                   

Output: 
 

Supported Browser:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari



My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!