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

Add the .activeclass to use.

  • 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 active">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>
Disabled items

Add the .disabledclass to use.

  • 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 disabled" aria-disabled="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>
Links and buttons
<!-- Link --><div class="list-group">  <a href="#" class="list-group-item list-group-item-action">...</a>  <a href="#" class="list-group-item list-group-item-action">...</a>  <a href="#" class="list-group-item list-group-item-action">...</a>  <a href="#" class="list-group-item list-group-item-action">...</a>  <a href="#" class="list-group-item list-group-item-action">...</a></div><!-- Button --><div class="list-group">  <button type="button" class="list-group-item list-group-item-action">...</button>  <button type="button" class="list-group-item list-group-item-action">...</button>  <button type="button" class="list-group-item list-group-item-action">...</button>  <button type="button" class="list-group-item list-group-item-action">...</button>  <button type="button" class="list-group-item list-group-item-action">...</button></div>
Flush
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
<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>  <li class="list-group-item">Vestibulum at eros</li></ul>
Contextual classes
  • 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
  • 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 dark list group item
<ul class="list-group">  <li class="list-group-item list-group-item-primary">...</li>  <li class="list-group-item list-group-item-secondary">...</li>  <li class="list-group-item list-group-item-success">...</li>  <li class="list-group-item list-group-item-danger">...</li>  <li class="list-group-item list-group-item-warning">...</li>  <li class="list-group-item list-group-item-info">...</li>  <li class="list-group-item list-group-item-light">...</li>  <li class="list-group-item list-group-item-dark">...</li></ul><!-- Light --><ul class="list-group">  <li class="list-group-item list-group-item-primary-bright">...</li>  <li class="list-group-item list-group-item-secondary-bright">...</li>  <li class="list-group-item list-group-item-success-bright">...</li>  <li class="list-group-item list-group-item-danger-bright">...</li>  <li class="list-group-item list-group-item-warning-bright">...</li>  <li class="list-group-item list-group-item-info-bright">...</li>  <li class="list-group-item list-group-item-dark-bright">...</li></ul>
With badges
  • 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
<div class="list-group">  <a href="#" class="list-group-item list-group-item-action active">    <div class="d-flex w-100 justify-content-between">      <h5 class="mb-1">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 href="#" class="list-group-item list-group-item-action">    <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 href="#" class="list-group-item list-group-item-action">    <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>
JavaScript behavior
<div class="row">  <div class="col-md-4">    <div class="list-group" id="list-tab" role="tablist">      <a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab">Home</a>      <a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab">Profile</a>      <a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" >Messages</a>      <a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab" >Settings</a>    </div>  </div>  <div class="col-md-8">    <div class="tab-content" id="nav-tabContent">      <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">...</div>      <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">...</div>      <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">...</div>      <div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">...</div>    </div>  </div></div>