List Groupsv4.x

<!-- Simple List Group (w/ Active, Disabled, and Badges)-->
<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center active">
    List item, active
    <span class="badge badge-primary badge-pill bg-light text-primary">99</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    List item
    <span class="badge badge-primary badge-pill">35</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center disabled">
    List item
    <span class="badge badge-primary badge-pill">0</span>
  </li>
</ul>

<!-- Horizontal List with Colors -->
<ul class="list-group list-group-horizontal">
  <li class="list-group-item list-group-item">None</li>
  <li class="list-group-item list-group-item-primary">Primary</li>
  <li class="list-group-item list-group-item-info">Info</li>
  <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>
</ul>
<br>
<ul class="list-group list-group-horizontal">
  <li class="list-group-item list-group-item-light">Light</li>
  <li class="list-group-item list-group-item-secondary">Secondary</li>
  <li class="list-group-item list-group-item-dark">Dark</li>
</ul>

<!-- Complex Lists -->
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action bg-light">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List Group Item Header</h5>
      <small>Today</small>
    </div>
    <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small>Donec id elit non mi porta.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List Group Item Header</h5>
      <small class="text-muted">Yesterday</small>
    </div>
    <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small class="text-muted">Donec id elit non mi porta.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List Group Item Header</h5>
      <small class="text-muted">2 days ago</small>
    </div>
    <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small class="text-muted">Donec id elit non mi porta.</small>
  </a>
</div>

.list-group-item.disabled {
  pointer-events: auto;
  cursor: not-allowed;
}