snitchbot | Dashboard & Remote Field Sensing

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.

Lists on Bootstrap

Basic Example

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>

Active Item

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros

<div class="list-group"><a class="list-group-item list-group-item-action active" href="#">Cras justo odio</a>
  <a class="list-group-item list-group-item-action" href="#">Dapibus ac facilisis in</a>
  <a class="list-group-item list-group-item-action" href="#">Morbi leo risus</a>
  <a class="list-group-item list-group-item-action" href="#">Porta ac consectetur ac</a>
  <a class="list-group-item list-group-item-action disabled" href="#">Vestibulum at eros</a>
</div>

List group flush

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac

<ul class="list-group list-group-flush">
  <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>
</ul>

List group with badge

Cras justo odio14
Dapibus ac facilisis in2
Morbi leo risus1
Dapibus ac facilisis in9

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">Cras justo odio<span class="badge badge-soft-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-soft-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-soft-primary badge-pill">1</span></li>
  <li class="list-group-item d-flex justify-content-between align-items-center">Dapibus ac facilisis in<span class="badge badge-soft-primary badge-pill">9</span></li>
</ul>

Contextual classes

Dapibus ac facilisis in
A simple primary list group item
A simple secondary list group item
A simple success list group item
A simple danger list group item
A simple warning list group item
A simple info list group item
A simple light list group item
A simple dark list group item

<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-success">A simple success 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-warning">A simple warning 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-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>

Custom content

List group item heading

3 days ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.

List group item heading

3 days ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.

List group item heading

3 days ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.

<div class="list-group"><a class="list-group-item list-group-item-action flex-column align-items-start active" href="#">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1 text-white">List group item heading</h5><small>3 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>Donec id elit non mi porta.</small>
  </a><a class="list-group-item list-group-item-action flex-column align-items-start" href="#">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5><small class="text-muted">3 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><a class="list-group-item list-group-item-action flex-column align-items-start" href="#">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5><small class="text-muted">3 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>