List group

List group

  • 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>

Badge

  • 14 Cras justo odio
  • 2 Dapibus ac facilisis in
  • 1 Morbi leo risus
<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
  <li class="list-group-item">
    <span class="badge">2</span>
    Dapibus ac facilisis in
  </li>
  <li class="list-group-item">
    <span class="badge">1</span>
    Morbi leo risus
  </li>
</ul>

Linked items

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

Custom content

List group item heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Serpere anguiculos, nare anaticulas.

  • List group item heading

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Serpere anguiculos, nare anaticulas.

  • List group item heading

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Serpere anguiculos, nare anaticulas.

  • <div class="list-group">
      <a href="#" class="list-group-item active">
        <h4 class="list-group-item-heading">List group item heading</h4>
        <p class="list-group-item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Serpere anguiculos, nare anaticulas.</p>
      </a>
      <li href="#" class="list-group-item active">
        <h4 class="list-group-item-heading">List group item heading</h4>
        <p class="list-group-item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Serpere anguiculos, nare anaticulas.</p>
      </li>
      <li href="#" class="list-group-item active">
        <h4 class="list-group-item-heading">List group item heading</h4>
        <p class="list-group-item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Serpere anguiculos, nare anaticulas.</p>
      </li>
    </div>