<ul class="list-group">
  <li class="list-group-item">News Feed</li>
  <li class="list-group-item">Messages</li>
  <li class="list-group-item">Events</li>
  <li class="list-group-item">Groups</li>
  <li class="list-group-item">Pages</li>
</ul>

<div class="list-group"><a class="list-group-item list-group-item-action active" href="#!">News Feed</a>
  <a class="list-group-item list-group-item-action" href="#!">Messages</a>
  <a class="list-group-item list-group-item-action" href="#!">Events</a>
  <a class="list-group-item list-group-item-action" href="#!">Groups</a>
  <a class="list-group-item list-group-item-action disabled" href="#!">Pages</a>
</div>

<ul class="list-group list-group-flush">
  <li class="list-group-item">Messages</li>
  <li class="list-group-item">Events</li>
  <li class="list-group-item">Groups</li>
  <li class="list-group-item">Pages</li>
</ul>

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">Messages<span class="badge badge-light-primary rounded-pill">14</span></li>
  <li class="list-group-item d-flex justify-content-between align-items-center">Events<span class="badge badge-light-primary rounded-pill">2</span></li>
  <li class="list-group-item d-flex justify-content-between align-items-center">Groups<span class="badge badge-light-primary rounded-pill">1</span></li>
  <li class="list-group-item d-flex justify-content-between align-items-center">Pages<span class="badge badge-light-primary rounded-pill">9</span></li>
</ul>

<ul class="list-group">
  <li class="list-group-item py-3">Example with background</li>
  <li class="list-group-item list-group-item-primary py-3">A simple primary list group item</li>
  <li class="list-group-item list-group-item-secondary py-3">A simple secondary list group item</li>
  <li class="list-group-item list-group-item-success py-3">A simple success list group item</li>
  <li class="list-group-item list-group-item-danger py-3">A simple danger list group item</li>
  <li class="list-group-item list-group-item-warning py-3">A simple warning list group item</li>
  <li class="list-group-item list-group-item-info py-3">A simple info list group item</li>
  <li class="list-group-item list-group-item-light py-3">A simple light list group item</li>
  <li class="list-group-item list-group-item-dark py-3">A simple dark list group item</li>
</ul>

<div class="list-group">
  <a class="list-group-item list-group-item-action flex-column align-items-start p-3 p-sm-4 light active" href="#!">
    <div class="d-flex flex-column flex-sm-row justify-content-between mb-1 mb-md-0">
      <h5 class="mb-1 text-white">List group · Bootstrap</h5>
      <small>3 days ago</small>
    </div>
    <p class="mb-1">The most basic list group is an unordered list with list items and the proper classes. Build upon it with the options that follow, or with your own CSS as needed. </p>
    <small> The most basic list group</small>
  </a>
  <a class="list-group-item list-group-item-action flex-column align-items-start p-3 p-sm-4" href="#!">
    <div class="d-flex flex-column flex-sm-row justify-content-between mb-1 mb-md-0">
      <h5 class="mb-1">What is list group?</h5>
      <small class="text-600">3 days ago</small>
    </div>
    <p class="mb-1">Creating List Groups with Bootstrap. The list groups are very useful and flexible component for displaying lists of elements in a beautiful manner.</p>
    <small class="text-600">Donec id elit non mi porta.</small>
  </a>
  <a class="list-group-item list-group-item-action flex-column align-items-start p-3 p-sm-4" href="#!">
    <div class="d-flex flex-column flex-sm-row justify-content-between mb-1 mb-md-0">
      <h5 class="mb-1">What is ordered list?</h5>
      <small class="text-600">3 days ago</small>
    </div>
    <p class="mb-1">An ordered list typically is a numbered list of items. HTML 3.0 gives you the ability to control the sequence number - to continue where the previous list left off, or to start at a particular number.</p>
    <small class="text-600">An ordered list</small>
  </a>
</div>