View on GitHub

List Group Examples

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.

On this page

List Group - with card

example 1

A list item 14
A second list item 2
A third list item 1

html

<div class="card" style="width: 22rem;">
  <div class="card-body p-4">
    <ul class="list-group list-group-flush">
      <li class="list-group-item d-flex justify-content-between align-items-center ps-0 pe-0 pb-4">
        A list item
        <span class="badge bg-primary rounded-pill">14</span>
      </li>
      <li class="list-group-item d-flex justify-content-between align-items-center ps-0 pe-0 pt-4 pb-4">
        A second list item
        <span class="badge bg-primary rounded-pill">2</span>
      </li>
      <li class="list-group-item d-flex justify-content-between align-items-center ps-0 pe-0 pt-4">
        A third list item
        <span class="badge bg-primary rounded-pill">1</span>
      </li>
    </ul>
  </div>
</div>

example 2

Ik wil dit document downloaden
Of toch deze dan?
En wat denk je van deze

html

<div class="card" style="width: 22rem;">
  <div class="card-body p-4">
    <ul class="list-group list-group-flush">
      <li class="list-group-item d-flex justify-content-between align-items-center ps-0 pe-0 pb-3">
        Ik wil dit document downloaden
        <button type="button" class="btn btn-icon-ghost-on-light btn-icon-xs rounded-circle"><span class="fa fa-arrow-down"></span></button>
      </li>
      <li class="list-group-item d-flex justify-content-between align-items-center ps-0 pe-0 pt-3 pb-3">
        Of toch deze dan?
        <button type="button" class="btn btn-icon-ghost-on-light btn-icon-xs rounded-circle"><span class="fa fa-arrow-down"></span></button>
      </li>
      <li class="list-group-item d-flex justify-content-between align-items-center ps-0 pe-0 pt-3">
        En wat denk je van deze
        <button type="button" class="btn btn-icon-ghost-on-light btn-icon-xs rounded-circle"><span class="fa fa-arrow-down"></span></button>
      </li>
    </ul>
  </div>
</div>

List Group - without card

example 1

A list item
A second list item
A third list item

html

<div style="width: 22rem;">
  <ul class="list-group list-group-flush bg-white pt-1 pb-1 ps-3 pe-3">
    <li class="list-group-item d-flex justify-content-between align-items-center ps-0 pe-0 pb-2">
      A list item
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center ps-0 pe-0 pt-2 pb-2">
      A second list item
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center ps-0 pe-0 pt-2">
      A third list item
    </li>
  </ul>
</div>

example 2

A list item 14
A second list item 2
A third list item 1

html

<div style="width: 22rem;">
  <ul class="list-group list-group-flush bg-white p-3">
    <li class="list-group-item d-flex justify-content-between align-items-center ps-0 pe-0 pb-4">
      A list item
      <span class="badge bg-primary rounded-pill">14</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center ps-0 pe-0 pt-4 pb-4">
      A second list item
      <span class="badge bg-primary rounded-pill">2</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center ps-0 pe-0 pt-4">
      A third list item
      <span class="badge bg-primary rounded-pill">1</span>
    </li>
  </ul>
</div>

example 3

Ik wil dit document downloaden
Of toch deze dan?
En wat denk je van deze

html

<div style="width: 22rem;">
  <ul class="list-group list-group-flush bg-white p-3">
    <li class="list-group-item d-flex justify-content-between align-items-center ps-0 pe-0 pb-3">
      Ik wil dit document downloaden
      <button type="button" class="btn btn-icon-ghost-on-light btn-icon-xs rounded-circle"><span class="fa fa-arrow-down"></span></button>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center ps-0 pe-0 pt-3 pb-3">
      Of toch deze dan?
      <button type="button" class="btn btn-icon-ghost-on-light btn-icon-xs rounded-circle"><span class="fa fa-arrow-down"></span></button>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center ps-0 pe-0 pt-3">
      En wat denk je van deze
      <button type="button" class="btn btn-icon-ghost-on-light btn-icon-xs rounded-circle"><span class="fa fa-arrow-down"></span></button>
    </li>
  </ul>
</div>