HOME C C++ PYTHON JAVA HTML CSS JAVASCRIPT BOOTSTRAP JQUERY REACT PHP SQL AJAX JSON DATA SCIENCE AI

Bootstrap 5 List Groups

The most basic list group is an unordered list with list items:

  • First item
  • Second item
  • Third item

Example

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

Active State

    
  
  • Active item
    • 
  
  • Second item
    • 
  
  • Third item
    •

Example

<ul class="list-group">
 <li class="list-group-item active">Active item</li>
  <li class="list-group-item">Second item</li>
  <li class="list-group-item">Third item</li>
</ul>
You can click on above box to edit the code and run again.

List Group With Linked Items

First item Second item Third item

To create a list group with linked items, use <div> instead of <ul> and <a> instead of <li>. Optionally, add the <code>.list-group-item-action<code> class if you want a grey background color on hover:

Example

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">First item
  <a href="#" class="list-group-item list-group-item-action">Second item
  <a href="#" class="list-group-item list-group-item-action">Third item
</div>
You can click on above box to edit the code and run again.

Disabled Item

The .disabled class adds a lighter text color to the disabled item. And when used on links, it will remove the hover effect:

Disabled item Disabled item Third item

Example

<div class="list-group">
  <a href="#" class="list-group-item disabled">Disabled item</a>
<a href="#" class="list-group-item disabled">Disabled item</a>
  <a href="#" class="list-group-item">Third item</a>
</div>

Flush / Remove Borders

Use the .list-group-flush class to remove some borders and rounded corners:

  • First item
  • Second item
  • Third item
  • Fourth item

Example

<ul class="list-group list-group-flush">
  <li class="list-group-item">First item</li>
  <li class="list-group-item">Second item</li>
  <li class="list-group-item">Third item</li>
  <li class="list-group-item">Fourth item</li>
</ul>
You can click on above box to edit the code and run again.

Numbered List Groups

Use the .list-group-numbered class to create list items with numbers in front of them::

  1. First item
  2. Second item
  3. Third item

Example

<ol class="list-group list-group-numbered">
  <li class="list-group-item">First item</li>
  <li class="list-group-item">Second item</li>
  <li class="list-group-item">Third item</li>
</ol>
You can click on above box to edit the code and run again.

Horizontal List Groups

If you want the list items to display horizontally instead of vertically (side by side instead of on top of each other), add the .list-group-horizontal class to .list-group:

  • First item
  • Second item
  • Third item
  • Fourth item

Example

<ul class="list-group list-group-horizontal">
  <li class="list-group-item">First item</li>
 <li class="list-group-item">Second item</li>
 <li class="list-group-item">Third item</li>
  <li class="list-group-item">Fourth item</li>
</ul>
You can click on above box to edit the code and run again.

Contextual Classes

Contextual classes can be used to add color to the list items:

The classes for coloring 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,:

  • Success item
  • Secondary item
  • Info item
  • Warning item
  • Danger item
  • Primary item
  • Dark item
  • Light item

Example

<ul class="list-group">
  <li class="list-group-item list-group-item-success">Success item</li>
  <li class="list-group-item list-group-item-secondary">Secondary item</li>
  <li class="list-group-item list-group-item-info">Info item</li>
  <li class="list-group-item list-group-item-warning">Warning item</li>
  <li class="list-group-item list-group-item-danger">Danger item</li>
  <li class="list-group-item list-group-item-primary">Primary item</li>
 <li class="list-group-item list-group-item-dark">Dark item</li>
  <li class="list-group-item list-group-item-light">Light item</li>
</ul>
You can click on above box to edit the code and run again.

Link items with Contextual Classes

The most basic list group is an unordered list with list items:

Action item Success item Secondary item Info item Warning item Danger item Primary item Dark item Light item

Example

<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-action list-group-item-success">Success item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">Secondary ite</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-info">Info item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">Warning item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">Danger item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-primary">Primary item</a>
 <a href="#" class="list-group-item list-group-item-action list-group-item-dark">Dark item</a>
 <a href="#" class="list-group-item list-group-item-action list-group-item-light">Light item</a>
</div>
You can click on above box to edit the code and run again.

List Group with Badges

Combine .badge classes with utility/helper classes to add badges inside the list group:

  • Inbox 12
  • Ads 50
  • Junk 99

Example

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Inbox
    <span class="badge bg-primary rounded-pill">12</span>
 </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Ads
    <span class="badge bg-primary rounded-pill">50</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Junk
    <span class="badge bg-primary rounded-pill">99</span>
  </li>
</ul>
You can click on above box to edit the code and run again.

Output