Signup/Sign In

Bootstrap List Group

The Bootstrap list group is used to display a series of items. It is a flexible and powerful component in bootstrap. You can add links, buttons, badges, or any other components to form a list group. You can also modify it.

  • The most basic list group is an unordered list with a list of items.
  • Add .list-group class to <ul> element to create a list group.
  • Add items to the list using .list-group-item class.

Example: Creating a list group using Bootstrap

Let's see, how we can create a basic list group using bootstrap.

<!doctype html>
<html lang="en">
  <head>
    <title>Bootstrap </title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"> 
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
  </head>
  <body>
   <div class="container">
     <h2>Creating a List group</h2>
     <ul class="list-group">
       <li class="list-group-item">item 1</li>
       <li class="list-group-item">item 2</li>
       <li class="list-group-item">item 3</li>
       <li class="list-group-item">item 4</li>
       <li class="list-group-item">item 5</li>
     </ul>
   </div>
   </div>
  </body>
</html>

Output:

Here is the output showing list of items.

list group

Creating a list group with active items using Bootstrap

To see which item is selected and which is active for now, use the .active class with .list-group-item in the <li> element. See the example below.

<!doctype html>
<html lang="en">
  <head>
   <title>Bootstrap </title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"> 
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
  </head>
  <body>
   <div class="container">
     <h2>Creating a List group</h2>
     <ul class="list-group">
       <li class="list-group-item active">item 1</li>
       <li class="list-group-item">item 2</li>
       <li class="list-group-item">item 3</li>
       <li class="list-group-item">item 4</li>
       <li class="list-group-item">item 5</li>
     </ul>
   </div>
   </div>
  </body>
</html>

Output:

Here is the output which shows the active items.

List group active item

Creating a list group with disabled items using Bootstrap

To disable items add .disabled class with .list-group-item in the <li> tag. The item will appear blur and cannot be selected. See the example below.

<!doctype html>
<html lang="en">
  <head>
   <title>Bootstrap </title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"> 
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
  </head>
  <body>
   <div class="container">
     <h2>Creating a List group</h2>
     <ul class="list-group">
       <li class="list-group-item disabled">item 1</li>
       <li class="list-group-item">item 2</li>
       <li class="list-group-item">item 3</li>
       <li class="list-group-item">item 4</li>
       <li class="list-group-item">item 5</li>
     </ul>
   </div>
   </div>
  </body>
</html>

Output:

Here is the output of the above program.

List group disable

Creating a list group with links using Bootstrap

Links can be added to list group items. It makes the list actionable. In addition to using it add .list-group-item-action class to hover, active, and disable states. Here is an example to add links to the group item.

<!doctype html>
<html lang="en">
  <head>
    <title>Bootstrap </title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"> 
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
  </head>
  <body>
   <div class="container">
     <h2> A List group link</h2>
     <div class="list-group">
      <a href="#" class="list-group-item list-group-item-action active">Link  active</a>
      <a href="#" class="list-group-item list-group-item-action">Link 2</a>
      <a href="#" class="list-group-item list-group-item-action">Link 3</a>
      <a href="#" class="list-group-item list-group-item-action">Link 4</a>
      <a href="#" class="list-group-item list-group-item-action disabled">Link disable</a>
    </div>
   </div>
   </div>
  </body>
</html>

Output:

Here is the output showing list group links.

list group links

Creating a list group with buttons using Bootstrap

List groups can be created with a button effect. To add a button use the .list-group-item class within <button> tag to add button effect to list. Let's see an example of a list group with buttons.

<!doctype html>
<html lang="en">
  <head>
    <title>Bootstrap </title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"> 
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
  </head>
  <body>
   <div class="container">
     <h2> A List group Buttons</h2>
     <<div class="list-group">
       <button type="button" class="list-group-item list-group-item-action active">Active button</button>
       <button type="button" class="list-group-item list-group-item-action">Button 1</button>
       <button type="button" class="list-group-item list-group-item-action">Button 2</button>
       <button type="button" class="list-group-item list-group-item-action">Button 3</button>
       <button type="button" class="list-group-item list-group-item-action" disabled>Button Disabled</button>
     </div>
   </div>
   </div>
  </body>
</html>

Output:

The output below shows list group with buttons.

list group button

Creating a list group with a rounded corner using Bootstrap

To remove rounded corners and borders from the group list using flush, add .item-group-flush class with list -group class for adding flush. See the example below.

<!doctype html>
<html lang="en">
  <head>
    <title>Bootstrap </title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"> 
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
  </head>
  <body>
   <div class="container">
     <h2> A List group with flush</h2>
      <ul class="list-group list-group-flush">
       <li class="list-group-item">Item 1</li>
       <li class="list-group-item">Item 2</li>
       <li class="list-group-item">Item 3</li>
       <li class="list-group-item">Item 4</li>
       <li class="list-group-item">Item 4</li>
     </ul>
   </div>
   </div>
  </body>
</html>

Output:

List group flush

Creating a colorful list group items using Bootstrap

Add background color to item groups using contextual class. Add contextual class like list-group-item-primary with the list-group-item. Hover effects can be added with contextual classes.

Example: Creating a colorful list group item using Bootstrap

Let's see an example of a list group with a colored background.

<!doctype html>
<html lang="en">
  <head>
    <title>Bootstrap </title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"> 
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
  </head>
  <body>
   <div class="container">
     <h2> A List group with contextual classes</h2>
      <a href="#" class="list-group-item list-group-item-action list-group-item-primary">Primary list </a>
      <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">Secondary list</a>
      <a href="#" class="list-group-item list-group-item-action list-group-item-success">Success List</a>
      <a href="#" class="list-group-item list-group-item-action list-group-item-danger">Danger List</a>
      <a href="#" class="list-group-item list-group-item-action list-group-item-warning">Warning List</a>
      <a href="#" class="list-group-item list-group-item-action list-group-item-info">Info List</a>
      <a href="#" class="list-group-item list-group-item-action list-group-item-light">Light background list</a>
      <a href="#" class="list-group-item list-group-item-action list-group-item-dark">Dark background List</a>
   </div>
   </div>
  </body>
</html>

Output:

Here is the output showing the contextual group list.

List with contextual class

Creating a list group with badges using Bootstrap

We can add badges to the list group by using .badge class in a <span> tag inside <li> tag. See the example below.

<!doctype html>
<html lang="en">
  <head>
   <!doctype html>
<html lang="en">
  <head>
    <title>Bootstrap </title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"> 
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
  </head>
  <body>
   <div class="container">
     <h2> A List group with contextual classes</h2>
      <a href="#" class="list-group-item list-group-item-action list-group-item-primary">Primary list </a>
      <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">Secondary list</a>
      <a href="#" class="list-group-item list-group-item-action list-group-item-success">Success List</a>
      <a href="#" class="list-group-item list-group-item-action list-group-item-danger">Danger List</a>
      <a href="#" class="list-group-item list-group-item-action list-group-item-warning">Warning List</a>
      <a href="#" class="list-group-item list-group-item-action list-group-item-info">Info List</a>
      <a href="#" class="list-group-item list-group-item-action list-group-item-light">Light background list</a>
      <a href="#" class="list-group-item list-group-item-action list-group-item-dark">Dark background List</a>
   </div>
   </div>
  </body>
</html>
  </head>
  <body>
   <div class="container">
     <h2> A List group with Badges</h2>
      <ul class="list-group">
       <li class="list-group-item d-flex justify-content-between align-items-center">Item 1
         <span class="badge badge-primary badge-pill">5</span>
       </li>
       <li class="list-group-item d-flex justify-content-between align-items-center">Item 2
         <span class="badge badge-primary badge-pill">4</span>
       </li>
       <li class="list-group-item d-flex justify-content-between align-items-center">Item 3
         <span class="badge badge-primary badge-pill">2</span>
       </li>
      </ul>
   </div>
  </body>
</html>

Output:

List group badges

Conclusion

Here, we learned how to create a list group and add items to them. Further modify it using different classes like buttons, links, and badges. Add contextual classes, hover effect, and flush.