Skip to content
Related Articles
Open in App
Not now

Related Articles

Bootstrap 5 List group

Improve Article
Save Article
  • Difficulty Level : Easy
  • Last Updated : 05 May, 2022
Improve Article
Save Article

Bootstrap 5 is the latest major release by Bootstrap in which they have revamped the UI and made various changes. List groups are a flexible and powerful component for displaying a series of content. These can be modified and extended to support just about any content within. 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.

Syntax:

<div class="list-group"> Contents... <div>

Example: 

HTML




<!DOCTYPE html>
<html>
<head>
    <!-- Load Bootstrap -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
        crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous">
    </script>
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
        integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
        crossorigin="anonymous">
    </script>
</head>
<body style="text-align: center;">
    <div class="container mt-3" style="width: 700px;">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <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>


<head>


    <!-- Load Bootstrap -->


    <link rel="stylesheet" href=


"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"


        integrity=


"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"


        crossorigin="anonymous">


    <script src=


"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"


        integrity=


"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"


        crossorigin="anonymous">


    </script>


    <script src=


"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"


        integrity=


"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"


        crossorigin="anonymous">


    </script>


</head>


<body style="text-align: center;">


    <div class="container mt-3" style="width: 700px;">


        <h1 style="color: green;">


            GeeksforGeeks


        </h1>


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


<head>


    <!-- Load Bootstrap -->


    <link rel="stylesheet" href=


"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"


        integrity=


"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"


        crossorigin="anonymous">


    <script src=


"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"


        integrity=


"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"


        crossorigin="anonymous">


    </script>


    <script src=


"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"


        integrity=


"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"


        crossorigin="anonymous">


    </script>


</head>


<body style="text-align: center;">


    <div class="container mt-3" style="width: 700px;">


        <h1 style="color: green;">


            GeeksforGeeks


        </h1>


        <div class="container">


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


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


<head>


    <!-- Load Bootstrap -->


    <link rel="stylesheet" href=


"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"


        integrity=


"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"


        crossorigin="anonymous">


    <script src=


"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"


        integrity=


"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"


        crossorigin="anonymous">


    </script>


    <script src=


"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"


        integrity=


"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"


        crossorigin="anonymous">


    </script>


</head>


<body style="text-align: center;">


    <div class="container mt-3" style="width: 700px;">


        <h1 style="color: green;">


            GeeksforGeeks


        </h1>


        <div class="container">


            <div class="list-group">


                <a href="#" class="list-group-item disabled">


                    Android


                </a>


                <a href="#" class="list-group-item">


                    Web


                </a>


                <a href="#" class="list-group-item disabled">


                    AI


                </a>


            </div>


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


<head>


    <!-- Load Bootstrap -->


    <link rel="stylesheet" href=


"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"


        integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"


        crossorigin="anonymous">


    <script src=


"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"


        integrity=


"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"


        crossorigin="anonymous">


    </script>


    <script src=


"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"


        integrity=


"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"


        crossorigin="anonymous">


    </script>


</head>


<body style="text-align:center;">


    <div class="container mt-3" style="width:700px;">


        <h1 style="color:green;">


            GeeksforGeeks


        </h1>


        <div class="container">


            <ul class="list-group


                    list-group-flush">


                <a href="#" class="list-group-item">


                    Android


                </a>


                <a href="#" class="list-group-item">


                    Web


                </a>


                <a href="#" class="list-group-item">


                    AI


                </a>


            </ul>


        </div>


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


<head>


    <!-- Load Bootstrap -->


    <link rel="stylesheet" href=


"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"


        integrity=


"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"


        crossorigin="anonymous">


    <script src=


"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"


        integrity=


"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"


        crossorigin="anonymous">


    </script>


    <script src=


"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"


        integrity=


"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"


        crossorigin="anonymous">


    </script>


</head>


<body style="text-align:center;">


    <div class="container mt-3" style="width:700px;">


        <h1 style="color:green;">


            GeeksforGeeks


        </h1>


        <div class="container">


            <ul class="list-group


                    list-group-horizontal">


                <a href="#" class="list-group-item">


                    Android


                </a>


                <a href="#" class="list-group-item">


                    Web


                </a>


                <a href="#" class="list-group-item">


                    AI


                </a>


            </ul>


        </div>


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


<head>


    <!-- Load Bootstrap -->


    <link rel="stylesheet" href=


"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"


        integrity=


"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"


        crossorigin="anonymous">


    <script src=


"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"


        integrity=


"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"


        crossorigin="anonymous">


    </script>


    <script src=


"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"


        integrity=


"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"


        crossorigin="anonymous">


    </script>


</head>


<body style="text-align: center;">


    <div class="container mt-3" style="width: 700px;">


        <h1 style="color: green;">


            GeeksforGeeks


        </h1>


        <ul class="list-group">


            <li class="list-group-item


                        list-group-item-primary">


                Web


            </li>


            <li class="list-group-item


                        list-group-item-secondary">


                Android


            </li>


            <li class="list-group-item


                        list-group-item-success">


                AI


            </li>


            <li class="list-group-item


                        list-group-item-warning">


                Data Science


            </li>


            <li class="list-group-item


                        list-group-item-danger">


                UI/UX


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


<head>


    <!-- Load Bootstrap -->


    <link rel="stylesheet" href=


"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"


        integrity=


"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"


        crossorigin="anonymous">


    <script src=


"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"


        integrity=


"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"


        crossorigin="anonymous">


    </script>


    <script src=


"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"


        integrity=


"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"


        crossorigin="anonymous">


    </script>


</head>


<body style="text-align: center;">


    <div class="container mt-3" style="width: 700px;">


        <h1 style="color: green;">


            GeeksforGeeks


        </h1>


        <ul class="list-group">


            <a class="list-group-item


                        list-group-item-primary">


                Web


            </a>


            <a class="list-group-item


                        list-group-item-secondary">


                Android


            </a>


            <a class="list-group-item


                        list-group-item-success">


                AI


            </a>


            <a class="list-group-item


                        list-group-item-warning">


                Data Science


            </a>


            <a class="list-group-item


                        list-group-item-danger">


                UI/UX


            </a>


        </ul>


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


<head>


    <!-- Load Bootstrap -->


    <link rel="stylesheet" href=


"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"


        integrity=


"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"


        crossorigin="anonymous">


    <script src=


"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"


        integrity=


"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"


        crossorigin="anonymous">


    </script>


    <script src=


"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"


        integrity=


"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"


        crossorigin="anonymous">


    </script>


</head>


<body style="text-align: center;">


    <div class="container mt-3" style="width: 700px;">


        <h1 style="color: green;">


            GeeksforGeeks


        </h1>


        <ul class="list-group">


            <li class="list-group-item


                        d-flex


                        justify-content-between


                        align-items-center">


                CPP


                <span class="badge bg-success">


                    X


                </span>


            </li>


            <li class="list-group-item


                        d-flex


                        justify-content-between


                        align-items-center">


                Python


                <span class="badge bg-success">


                    Y


                </span>


            </li>


            <li class="list-group-item d-flex


                        justify-content-between


                        align-items-center">


                JavaScript


                <span class="badge bg-success">


                    Z


                </span>


            </li>


        </ul>


    </div>


</body>


</html>



















                        







                        










Output:





    

        My Personal Notes
        arrow_drop_up
    

    

        
        

            
            
        

    


                            


                            

                            
                        
                            
                            


                        

        
                                                    

                                

                                    
Related Articles

                                    

                                        
                                        
                

                    1. 
                    
                        List group in bootstrap with examples
                    
                

        
                

                    2. 
                    
                        How to add active class on click event in custom list group in Bootstrap 4 ?
                    
                

        
                

                    3. 
                    
                        How to add badge to list group in Bootstrap ?
                    
                

        
                

                    4. 
                    
                        Bootstrap 5 List group Numbered
                    
                

        
                

                    5. 
                    
                        Bootstrap 5 List group Flush
                    
                

        
                

                    6. 
                    
                        Bootstrap 5 List group Links and buttons
                    
                

        
                

                    7. 
                    
                        Bootstrap 5 List group Active items
                    
                

        
                

                    8. 
                    
                        Bootstrap 5 List group Disabled items
                    
                

        
                

                    9. 
                    
                        Bootstrap 5 List group Using data Attributes
                    
                

        
                

                    10. 
                    
                        Bootstrap 5 List group with badges
                    
                

                                            

                                

                            

                        
                        

                            

                                

                                    
                                                                    

                            

                            

                                                                    

                                        
                                            
                                            Previous
                                        
                                        
                                        

                                            Bootstrap 5 Modal
                                        

                                    

                                                                    

                                        
                                            Next
                                            
                                        
                                        
                                        

                                            Bootstrap 5 | Card
                                        

                                    

                                                            

                        

                        
                        

                            
                            

                                

                                    
Article Contributed By :

                                    

                                        

                                            

        https://media.geeksforgeeks.org/auth/avatar.png
    

    

        

            gurrrung
        

        

            @gurrrung
        

    
                                        

                                    

                                

                                

                                    
Vote for difficulty

                                                                            

                                            Current difficulty :
                                            Easy
                                        

                                                                        

                                        

                                            
                                            
                                            
                                            
                                            
                                        

                                        

                                    

                                

                            

                            

                                                                    

                                        
Improved By : 

                                                                            

                                                                                                    

                                        
Article Tags : 

                                        
                                    

                                                                                            

                            

                                

                                    

                                    Report Issue
                                

                                
                            

                            
                        


                    


                

            

        

        

            
      
    
  
        

    

    

        

            

            

        

    






  


    
  

  
  
  








    
        We use cookies to ensure you have the best browsing experience on our website. By using our site, you
        acknowledge that you have read and understood our
        Cookie Policy &
        Privacy Policy
    
    







   Lightbox
   







  
  

    

      
Start Your Coding Journey Now!