List group

List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.

Basic example

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.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
<ul class="list-group">
  <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>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

With badges

Add badges to any list group item to show unread counts, activity, and more with the help of some utilities.

  • Cras justo odio 14
  • Dapibus ac facilisis in 2
  • Morbi leo risus 1 
<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Cras justo odio
    <span class="badge badge-primary badge-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Dapibus ac facilisis in
    <span class="badge badge-primary badge-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Morbi leo risus
    <span class="badge badge-primary badge-pill">1</span>
  </li>
</ul>

Custom content

Add nearly any HTML within, even for linked list groups like the one below, with the help of flexbox utilities.

  • Fully responsive design design

    Donec id elit non mi porta gravida at eget metus.

    Donec id elit non mi porta.
    3 days ago
  • Conveying meaning

    Donec id elit non mi porta gravida.

    Donec id elit non mi porta.
    3 days ago
  • Conveying meaning to assistive technologies

    Donec id elit non mi porta gravida at eget metus.

    Donec id elit non mi porta.
    3 days ago 
<ul class="list-group list-group-flush">
<li class="list-group-item d-flex align-items-center">
  <div class="mr-auto">
    <h6 class="mb-2">
      Fully responsive design design
    </h6>
    <p class="mb-0">
      Donec id elit non mi porta gravida at eget metus.
    </p>
    <small>Donec id elit non mi porta.</small>
  </div>
  <small class="text-muted">3 days ago</small>
</li>
<li class="list-group-item d-flex align-items-center">
  <div class="mr-auto">
    <h6 class="mb-2">
      Conveying meaning
    </h6>
    <p class="mb-0">
      Donec id elit non mi porta gravida.
    </p>
    <small>Donec id elit non mi porta.</small>
  </div>
  <small class="text-muted">3 days ago</small>
</li>
<li class="list-group-item d-flex align-items-center">
  <div class="mr-auto">
    <h6 class="mb-2">
      Conveying meaning to assistive technologies
    </h6>
    <p class="mb-0">
      Donec id elit non mi porta gravida at eget metus.
    </p>
    <small>Donec id elit non mi porta.</small>
  </div>
  <small class="text-muted">3 days ago</small>
</li>
</ul>

For more details please visit Bootstrap official site. Bootstrap Documentation