List Group

These modular elements can be readily used and customized in every layout across pages.

For detail documentation. View List Group 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
<ul class="list-group">
  <li class="list-group-item active" aria-current="true">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>
List Group Flush
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
<ul class="list-group list-group-flus">
  <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 Flush
  • 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 bg-primary rounded-pill">14</span></li>
  <li class="list-group-item d-flex justify-content-between align-items-center">Dapibus ac facilisis in<span class="badge bg-primary rounded-pill">2</span></li>
  <li class="list-group-item d-flex justify-content-between align-items-center">Morbi leo risus<span class="badge bg-primary rounded-pill">1</span></li>
  <li class="list-group-item d-flex justify-content-between align-items-center">Dapibus ac facilisis in<span class="badge bg-primary rounded-pill">9	</span></li>
</ul>
Contextual Classes
  • A simple default list group item
  • 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">A simple default list group item</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

Some placeholder content in a paragraph.

And some small print.
List group item heading
3 days ago

Some placeholder content in a paragraph.

And some muted small print.
List group item heading
3 days ago

Some placeholder content in a paragraph.

And some muted small print. 
<div class="list-group"><a class="list-group-item list-group-item-action active" href="#" aria-current="true">
    <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">Some placeholder content in a paragraph.</p><small>And some small print.</small>
  </a><a class="list-group-item list-group-item-action" 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">Some placeholder content in a paragraph.</p><small class="text-muted">And some muted small print.</small>
  </a><a class="list-group-item list-group-item-action" 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">Some placeholder content in a paragraph.</p><small class="text-muted">And some muted small print. </small>
  </a></div>