List Group

<!-- List Group Basic Example -->
<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item active">Dapibus ac facilisis (active)</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item disabled">Vestibulum at eros (disabled)</li>
</ul>

<!-- List Group Link Example -->
<nav class="list-group">
  <a class="list-group-item" href="#">Cras justo odio</a>
  <a class="list-group-item active" href="#">Dapibus ac facilisis (active)</a>
  <a class="list-group-item" href="#">Morbi leo risus</a>
  <a class="list-group-item disabled" href="#">Vestibulum at eros (disabled)</a></nav>

<!-- List Group with Icons -->
<nav class="list-group">
  <a class="list-group-item" href="#">
    <i class="fe-icon-airplay text-muted"></i>
    Cras justo odio
  </a>
  <a class="list-group-item active" href="#">
    <i class="fe-icon-anchor text-muted"></i>
    Dapibus ac facilisis (active)
  </a>
  <a class="list-group-item" href="#">
    <i class="fe-icon-bell text-muted"></i>
    Morbi leo risus
  </a>
  <a class="list-group-item" href="#">
    <i class="fe-icon-headphones text-muted"></i>
    Vestibulum at eros
  </a>
</nav>

<!-- List Group with Badges -->
<nav class="list-group">
  <a class="list-group-item d-flex justify-content-between align-items-center" href="#">
    Cras justo odio
    <span class="badge badge-pill badge-secondary">3</span>
  </a>
  <a class="list-group-item d-flex justify-content-between align-items-center active" href="#">
    Dapibus ac facilisis (active)
    <span class="badge badge-pill badge-accent">4</span>
  </a>
  <a class="list-group-item d-flex justify-content-between align-items-center" href="#">
    Morbi leo risus
    <span class="badge badge-pill badge-info">6</span>
  </a>
  <a class="list-group-item d-flex justify-content-between align-items-center" href="#">
    Porta ac consectetur ac
    <span class="badge badge-pill badge-danger">5</span>
  </a>
  <a class="list-group-item d-flex justify-content-between align-items-center" href="#">
    Vestibulum at eros
    <span class="badge badge-pill badge-success">9</span>
  </a>
</nav>

<!-- Basic Horizontal List Group (starting sm screen) -->
<ul class="list-group list-group-horizontal-sm">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
</ul>

<!-- Justified Horizontal List Group (starting sm screen) -->
<ul class="list-group list-group-horizontal-sm">
  <li class="list-group-item flex-fill text-center">Cras justo odio</li>
  <li class="list-group-item flex-fill text-center">Dapibus ac facilisis in</li>
  <li class="list-group-item flex-fill text-center">Morbi leo risus</li>
</ul>

<!-- Actionable Horizontal List Group (starting sm screen) -->
<div class="list-group list-group-horizontal-sm">
  <a href="#" class="list-group-item list-group-item-action active text-center">Active item here</a>
  <a href="#" class="list-group-item list-group-item-action text-center">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-action text-center">Morbi leo risus</a>
</div>

<!-- List Group Contextual Classes -->
<ul class="list-group">
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item list-group-item-primary">A simple primary list group item</li>
  <li class="list-group-item list-group-item-secondary">A simple secondary list group item</li>
  <li class="list-group-item list-group-item-accent">A simple accent list group item</li>
  <li class="list-group-item list-group-item-info">A simple info list group item</li>
  <li class="list-group-item list-group-item-success">A simple success list group item</li>
  <li class="list-group-item list-group-item-warning">A simple warning list group item</li>
  <li class="list-group-item list-group-item-danger">A simple danger list group item</li>
  <li class="list-group-item list-group-item-light">A simple light list group item</li>
  <li class="list-group-item list-group-item-dark">A simple dark list group item</li>
</ul>

<!-- List Group Custom Content -->
<div class="list-group">

  <!-- List Group Item -->
  <a class="list-group-item flex-column align-items-start active" href="#">
    <div class="d-flex flex-wrap w-100 justify-content-between">
      <h6>List group item heading</h6>
      <small class="d-block text-muted text-sm mb-2">3 days-ago</small>
    </div>
    <p class="text-md text-body">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. Excepteur sint occaecat cupidatat.</p>
    <small class="text-muted text-sm">Donec id elit non mi porta.</small>
  </a>

  <!-- List Group Item -->
  <a class="list-group-item flex-column align-items-start" href="#">
    <div class="d-flex flex-wrap w-100 justify-content-between">
      <h6>List group item heading</h6>
      <small class="d-block text-muted text-sm mb-2">3 days-ago</small>
    </div>
    <p class="text-md text-body">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. Excepteur sint occaecat cupidatat.</p>
    <small class="text-muted text-sm">Donec id elit non mi porta.</small>
  </a>

  <!-- List Group Item -->
  <a class="list-group-item flex-column align-items-start" href="#">
    <div class="d-flex flex-wrap w-100 justify-content-between">
      <h6>List group item heading</h6>
      <small class="d-block text-muted text-sm mb-2">3 days-ago</small>
    </div>
    <p class="text-md text-body">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. Excepteur sint occaecat cupidatat.</p>
    <small class="text-muted text-sm">Donec id elit non mi porta.</small>
  </a>
</div>