Bootstrap Tutorial
Bootstrap Examples
Bootstrap Advance
Bootstrap Utilities
MCQ
- bootstrap-mcq
Interview Questions

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

class ".list-group-item"

element are used to create a basic list group.
Bootstrap List Group Example

<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> </head> <body> <div class="container"> <h2>Basic List Group Example</h2> <ul class="list-group"> <li class="list-group-item">First item</li> <li class="list-group-item">Second item</li> <li class="list-group-item">Third item</li> </ul> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> </body> </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 element with class ".badge" inside the list item to create a badge.

<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> </head> <body> <div class="container"> <h2>List Group With Badges</h2> <ul class="list-group"> <li class="list-group-item"><span class="badge">12</span> New</li> <li class="list-group-item"><span class="badge">5</span> Deleted</li> <li class="list-group-item"><span class="badge">3</span> Warnings</li> </ul> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> </body> </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
instead of
- element to create a list group with linked items.
  <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> </head> <body> <div class="container"> <h2>List Group With Linked Items</h2> <div class="list-group"> <a href="#" class="list-group-item">First item</a> <a href="#" class="list-group-item">Second item</a> <a href="#" class="list-group-item">Third item</a> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> </body> </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.
  
  <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> </head> <body> <div class="container"> <h2>Active Item in a List Group</h2> <div class="list-group"> <a href="#" class="list-group-item active">First item (This is active item)</a> <a href="#" class="list-group-item">Second item</a> <a href="#" class="list-group-item">Third item</a> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> </body> </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.
  
  <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> </head> <body> <div class="container"> <h2>List Group With a Disabled Item</h2> <div class="list-group"> <a href="#" class="list-group-item disabled">First item</a> <a href="#" class="list-group-item">Second item</a> <a href="#" class="list-group-item">Third item</a> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> </body> </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
  <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> </head> <body> <div class="container"> <h2>List Group With Contextual Classes</h2> <ul class="list-group"> <li class="list-group-item list-group-item-success">First item</li> <li class="list-group-item list-group-item-info">Second item</li> <li class="list-group-item list-group-item-warning">Third item</li> <li class="list-group-item list-group-item-danger">Fourth item</li> </ul> <h2>Linked Items With Contextual Classes</h2> <a href="#" class="list-group-item list-group-item-success">First item</a> <a href="#" class="list-group-item list-group-item-info">Second item</a> <a href="#" class="list-group-item list-group-item-warning">Third item</a> <a href="#" class="list-group-item list-group-item-danger">Fourth item</a> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> </body> </html>
  Test it Now
  
  Link items with Contextual Classes
  
  In Bootstrap 4, you can also link items with contextual classes.
  
  Example:
  
  <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Linked Items With Contextual Classes</h2> <p>Move the mouse over the linked items to see the hover effect:</p> <div class="list-group"> <a href="#" class="list-group-item list-group-item-action">Action item</a> <a href="#" class="list-group-item list-group-item-success">Success item</a> <a href="#" class="list-group-item list-group-item-secondary">Secondary item</a> <a href="#" class="list-group-item list-group-item-info">Info item</a> <a href="#" class="list-group-item list-group-item-warning">Warning item</a> <a href="#" class="list-group-item list-group-item-danger">Danger item</a> <a href="#" class="list-group-item list-group-item-primary">Primary item</a> <a href="#" class="list-group-item list-group-item-dark">Dark item</a> <a href="#" class="list-group-item list-group-item-light">Light item</a> </div> </div> </body> </html>
  Test it Now
  
  Next TopicBootstrap Dropdown
  
  ← prev next →

Hot Tutorials

Contact US

Email:[email protected]

Bootstrap Tutorial

Bootstrap Examples

Bootstrap Advance

Bootstrap Utilities

MCQ

Interview Questions

Bootstrap List Groups

Bootstrap List Group Example

Bootstrap List Group with Badges

Bootstrap List Groups with Hyperlinks

Bootstrap List Group: Display active item

Bootstrap List Group: Display a disable item

Bootstrap List Group: Contextual Classes

Link items with Contextual Classes

Example:

Hot Tutorials

Contact US