Related Articles

Related Articles

List group in bootstrap with examples
  • Last Updated : 14 Jan, 2019

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:

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :