BS5 List Groups

Basic list group

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

Active and disabled items

<ul class="list-group">
  <li class="list-group-item active">Active</li>
  <li class="list-group-item">Normal</li>
  <li class="list-group-item disabled">Disabled</li>
</ul>

List group links

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active">Dashboard</a>
  <a href="#" class="list-group-item list-group-item-action">Settings</a>
</div>

Flush list group

Flush removes outer borders and rounded corners, useful inside cards.

<ul class="list-group list-group-flush">
  <li class="list-group-item">Item</li>
</ul>

Contextual variants

<li class="list-group-item list-group-item-success">Success</li>
<li class="list-group-item list-group-item-warning">Warning</li>
<li class="list-group-item list-group-item-danger">Danger</li>

Badges in list items

<li class="list-group-item d-flex justify-content-between align-items-center">
  Messages
  <span class="badge bg-primary rounded-pill">14</span>
</li>

Best practices

• Use list-group-item-action for clickable items
• Keep list items short for readability
• Pair with grid or cards for consistent layouts