Javatpoint Logo

91-9990449935

 0120-4256464

Bootstrap List Groups

Bootstrap list group is used to create a group of list with list items. The most basic list group is an unordered list containing list items.

The class ".list-group" within the <ul> element and the class ".list-group-item" within the <li>element are used to create a basic list group.

Bootstrap List Group Example

  1.  <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.   <title>Bootstrap Example</title>  
  5.   <meta charset="utf-8">  
  6.   <meta name="viewport" content="width=device-width, initial-scale=1">  
  7.   <link rel="stylesheet" href="../maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">  
  8.     
  9. </head>  
  10. <body>  
  11.   
  12. <div class="container">  
  13.   <h2>Basic List Group Example</h2>  
  14.   <ul class="list-group">  
  15.     <li class="list-group-item">First item</li>  
  16.     <li class="list-group-item">Second item</li>  
  17.     <li class="list-group-item">Third item</li>  
  18.   </ul>  
  19. </div>  
  20. <script src="../ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>  
  21. <script src="../maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
  22. </body>  
  23.   
  24. <!-- Mirrored from www.javatpoint.com/bootstrap-list-group by HTTrack Website Copier/3.x [XR&CO'2014], Tue, 21 Jun 2016 08:25:29 GMT -->  
  25. </html>  
Test it Now

Bootstrap List Group with Badges

The badges can also be added to a list group. They will automatically be positioned to the right side.

You have to create a <span> element with class ".badge" inside the list item to create a badge.

  1.  <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.   <title>Bootstrap Example</title>  
  5.   <meta charset="utf-8">  
  6.   <meta name="viewport" content="width=device-width, initial-scale=1">  
  7.   <link rel="stylesheet" href="../maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">  
  8.     
  9. </head>  
  10. <body>  
  11.   
  12. <div class="container">  
  13.   <h2>List Group With Badges</h2>  
  14.   <ul class="list-group">  
  15.     <li class="list-group-item"><span class="badge">12</span> New</li>  
  16.     <li class="list-group-item"><span class="badge">5</span> Deleted</li>    
  17.     <li class="list-group-item"><span class="badge">3</span> Warnings</li>    
  18.   </ul>  
  19. </div>  
  20. <script src="../ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>  
  21. <script src="../maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
  22. </body>  
  23. </html>  
Test it Now

Bootstrap List Groups with Hyperlinks

You can also link items to the list group. This provides a grey background color on hover. You have to use <div> instead of <ul> and <a> instead of <li> element to create a list group with linked items.

  1.  <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.   <title>Bootstrap Example</title>  
  5.   <meta charset="utf-8">  
  6.   <meta name="viewport" content="width=device-width, initial-scale=1">  
  7.   <link rel="stylesheet" href="../maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">  
  8.     
  9. </head>  
  10. <body>  
  11.   
  12. <div class="container">  
  13.   <h2>List Group With Linked Items</h2>  
  14.   <div class="list-group">  
  15.     <a href="#" class="list-group-item">First item</a>  
  16.     <a href="#" class="list-group-item">Second item</a>  
  17.     <a href="#" class="list-group-item">Third item</a>  
  18.   </div>  
  19. </div>  
  20. <script src="../ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>  
  21. <script src="../maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
  22. </body>  
  23. </html>  
Test it Now

Bootstrap List Group: Display active item

The class ".active" is used to highlight the current item. It specifies that the specific item is in active state.

  1.  <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.   <title>Bootstrap Example</title>  
  5.   <meta charset="utf-8">  
  6.   <meta name="viewport" content="width=device-width, initial-scale=1">  
  7.   <link rel="stylesheet" href="../maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">  
  8.     
  9. </head>  
  10. <body>  
  11.   
  12. <div class="container">  
  13.   <h2>Active Item in a List Group</h2>  
  14.   <div class="list-group">  
  15.     <a href="#" class="list-group-item active">First item (This is active item)</a>  
  16.     <a href="#" class="list-group-item">Second item</a>  
  17.     <a href="#" class="list-group-item">Third item</a>  
  18.   </div>  
  19. </div>  
  20. <script src="../ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>  
  21. <script src="../maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
  22. </body>  
  23. </html>  
Test it Now

Bootstrap List Group: Display a disable item

The class ".disabled" is used to disable a specific item in the list group.

  1.  <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.   <title>Bootstrap Example</title>  
  5.   <meta charset="utf-8">  
  6.   <meta name="viewport" content="width=device-width, initial-scale=1">  
  7.   <link rel="stylesheet" href="../maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">  
  8.     
  9. </head>  
  10. <body>  
  11.   
  12. <div class="container">  
  13.   <h2>List Group With a Disabled Item</h2>  
  14.   <div class="list-group">  
  15.     <a href="#" class="list-group-item disabled">First item</a>  
  16.     <a href="#" class="list-group-item">Second item</a>  
  17.     <a href="#" class="list-group-item">Third item</a>  
  18.   </div>  
  19. </div>  
  20. <script src="../ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>  
  21. <script src="../maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
  22. </body>  
  23. </html>  
Test it Now

Bootstrap List Group: Contextual Classes

You can add colors to the list items by using contextual classes.

The following classes are used for coloring list items:

  • .list-group-item-success
  • .list-group-item-info
  • .list-group-item-warning
  • .list-group-item-danger
  1.  <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.   <title>Bootstrap Example</title>  
  5.   <meta charset="utf-8">  
  6.   <meta name="viewport" content="width=device-width, initial-scale=1">  
  7.   <link rel="stylesheet" href="../maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">  
  8.     
  9. </head>  
  10. <body>  
  11.   
  12. <div class="container">  
  13.   <h2>List Group With Contextual Classes</h2>  
  14.   <ul class="list-group">  
  15.     <li class="list-group-item list-group-item-success">First item</li>  
  16.     <li class="list-group-item list-group-item-info">Second item</li>  
  17.     <li class="list-group-item list-group-item-warning">Third item</li>  
  18.     <li class="list-group-item list-group-item-danger">Fourth item</li>  
  19.   </ul>  
  20.     
  21.   <h2>Linked Items With Contextual Classes</h2>  
  22.     <a href="#" class="list-group-item list-group-item-success">First item</a>  
  23.     <a href="#" class="list-group-item list-group-item-info">Second item</a>  
  24.     <a href="#" class="list-group-item list-group-item-warning">Third item</a>  
  25.     <a href="#" class="list-group-item list-group-item-danger">Fourth item</a>  
  26.   </div>  
  27. </div>  
  28. <script src="../ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>  
  29. <script src="../maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
  30. </body>  
  31. </html>  
Test it Now
Next TopicBootstrap Dropdown