🤩 New Cool Developer Tools for you. Explore →
FREE JavaScript Video Series Start Learning →
FLAT 75% OFF All Interactive courses at flat ₹250 / $3.25 only. HURRRRRY!! Explore now
  Signup/Sign In
Tests
MCQs to test your knowledge.
Forum
Engage with the community.
Compilers
Compilers to execute code in browser.
Index
PUBLISHED ON: JUNE 5, 2021

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.

Want to learn coding?
Try our new interactive courses.
View All →
Over 20,000+ students enrolled.
About the author:
sandhya6gczb
Learn to Code
Learn and practice coding side-by-side.
NEW
C language Course
115+ coding exercises
Javascript Course
85+ coding exercises
More →