Bootstrap4 List Group

Most basic list groups are unordered.

To create a list group, you can add the .list-group class to the <ul> element and the .list-group-item class to the <li> elements:

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

Set an active state for a list item by adding the .active class:

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>

Disabled List Item

Use the .disabled class to set a disabled list item:

Example

<ul class="list-group">
  <li class="list-group-item disabled">Disabled item</li>
  <li class="list-group-item">Second item</li>
  <li class="list-group-item">Third item</li>
</ul>

Linked List Items

To create linked list items, replace <ul> with <div> and <a> with <li>. Add the .list-group-item-action class if you want a gray background on hover:

Example

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">First item</a>
  <a href="#" class="list-group-item list-group-item-action">Second item</a>
  <a href="#" class="list-group-item list-group-item-action">Third item</a>
</div>

Remove List Borders

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

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>

Horizontal List Group

You can create a horizontal list group by adding the .list-group-horizontal class after the .list-group class:

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>

Various Color List Items

The color of list items can be set using the following classes: .list-group-item-success, .list-group-item-secondary, .list-group-item-info, .list-group-item-warning, .list-group-item-danger, .list-group-item-dark, and .list-group-item-light:

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-dark">Dark item</li>
  <li class="list-group-item list-group-item-light">Light item</li>
</ul>

<li class="list-group-item list-group-item-success">Success List Item</li> <li class="list-group-item list-group-item-secondary">Secondary List Item</li> <li class="list-group-item list-group-item-info">Info List Item</li> <li class="list-group-item list-group-item-warning">Warning List Item</li> <li class="list-group-item list-group-item-danger">Danger List Item</li> <li class="list-group-item list-group-item-primary">Primary List Item</li> <li class="list-group-item list-group-item-dark">Dark Gray List Item</li> <li class="list-group-item list-group-item-light">Light List Item</li> </ul>

Link List Items with Various Colors

Example

<div class="list-group">
    <a href="#" class="list-group-item list-group-item-action">Active List Item</a>
    <a href="#" class="list-group-item list-group-item-success">Success List Item</a>
    <a href="#" class="list-group-item list-group-item-secondary">Secondary List Item</a>
    <a href="#" class="list-group-item list-group-item-info">Info List Item</a>
    <a href="#" class="list-group-item list-group-item-warning">Warning List Item</a>
    <a href="#" class="list-group-item list-group-item-danger">Danger List Item</a>
    <a href="#" class="list-group-item list-group-item-primary">Primary List Item</a>
    <a href="#" class="list-group-item list-group-item-dark">Dark Gray List Item</a>
    <a href="#" class="list-group-item list-group-item-light">Light List Item</a>
</div>