AroundUI Kit
Buy now

Menu

Content

Components

Utilities

Buy now

List group

Flexible component for displaying a series of content.

Bootstrap docs

Basic example

  • Active item here
  • Dapibus ac facilisis in
  • Disabled item here
  • Porta ac consectetur ac
  • Vestibulum at eros
<!-- Basic list group -->
<ul class="list-group">
  <li class="list-group-item active">Active item here</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item disabled" aria-disabled="true">Disabled item here</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>
// Basic list group
ul.list-group
  li.list-group-item.active
    | Active item here
  li.list-group-item
    | Dapibus ac facilisis in
  li(aria-disabled="true").list-group-item.disabled
    | Disabled item here
  li.list-group-item
    | Porta ac consectetur ac
  li.list-group-item
    | Vestibulum at eros

Flush

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
<!-- Flush list group -->
<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>
// Flush list group
ul.list-group.list-group-flush
  li.list-group-item
    | Cras justo odio
  li.list-group-item
    | Dapibus ac facilisis in
  li.list-group-item
    | Morbi leo risus
  li.list-group-item
    | Porta ac consectetur ac
  li.list-group-item
    | Vestibulum at eros

With icons & badges

  • Messages14
  • Orders2
  • Favourites6
<!-- List group with icons and badges -->
  <ul class="list-group">
    <li class="list-group-item d-flex align-items-center">
      <i class="ai-messages text-muted fs-xl me-2"></i>
      Messages
      <span class="badge bg-success ms-auto">14</span>
    </li>
    <li class="list-group-item d-flex align-items-center">
      <i class="ai-cart mt-n1 text-muted fs-xl me-2"></i>
      Orders
      <span class="badge bg-warning ms-auto">2</span>
    </li>
    <li class="list-group-item d-flex align-items-center">
      <i class="ai-heart text-muted fs-xl me-2"></i>
      Favourites
      <span class="badge bg-danger ms-auto">6</span>
    </li>
  </ul>
// List group with icons and badges
ul.list-group
  li.list-group-item.d-flex.align-items-center
    i.ai-messages.text-muted.fs-xl.me-2
    | Messages
    span.badge.bg-success.ms-auto 14
  li.list-group-item.d-flex.align-items-center
    i.ai-cart.text-muted.fs-xl.me-2
    | Orders
    span.badge.bg-warning.ms-auto 2
  li.list-group-item.d-flex.align-items-center
    i.ai-heart.text-muted.fs-xl.me-2
    | Favourites
    span.badge.bg-danger.ms-auto 6

Checkboxes & radios

<!-- List group with checkboxes -->
<div class="list-group">
  <label class="list-group-item">
    <input class="form-check-input me-2" type="checkbox" checked value="">
    Cras justo odio
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-2" type="checkbox" value="">
    Dapibus ac facilisis in
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-2" type="checkbox" value="">
    Morbi leo risus
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-2" type="checkbox" value="">
    Porta ac consectetur ac
  </label>
</div>

<!-- List group with radios -->
<div class="list-group">
  <label class="list-group-item">
    <input class="form-check-input me-2" type="radio" name="lg-radio" checked value="">
    Cras justo odio
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-2" type="radio" name="lg-radio" value="">
    Dapibus ac facilisis in
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-2" type="radio" name="lg-radio" value="">
   Morbi leo risus
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-2" type="radio" name="lg-radio" value="">
    Porta ac consectetur ac
  </label>
</div>
// List group with checkboxes
.list-group
  label.list-group-item
    input(type="checkbox", value="", checked).form-check-input.me-2
    | Cras justo odio
  label.list-group-item
    input(type="checkbox", value="").form-check-input.me-2
    | Dapibus ac facilisis in
  label.list-group-item
    input(type="checkbox", value="").form-check-input.me-2
    | Morbi leo risus
  label.list-group-item
    input(type="checkbox", value="").form-check-input.me-2
    | Porta ac consectetur ac

// List group with radios
.list-group
  label.list-group-item
    input(type="radio", name="lg-radio", value="", checked).form-check-input.me-2
    | Cras justo odio
  label.list-group-item
    input(type="radio", name="lg-radio", value="").form-check-input.me-2
    | Dapibus ac facilisis in
  label.list-group-item
    input(type="radio", name="lg-radio", value="").form-check-input.me-2
    | Morbi leo risus
  label.list-group-item
    input(type="radio", name="lg-radio", value="").form-check-input.me-2
    | Porta ac consectetur ac

Numbered list group

  1. Active item here
  2. Dapibus ac facilisis in
  3. Porta ac consectetur ac
  4. Vestibulum at eros
<!-- Numbered list group -->
<ol class="list-group list-group-numbered">
  <li class="list-group-item">Active item here</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ol>
// Numbered list group
ol.list-group.list-group-numbered
  li.list-group-item Active item here
  li.list-group-item Dapibus ac facilisis in
  li.list-group-item Porta ac consectetur ac
  li.list-group-item Vestibulum at eros

Horizontal list group

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
<!-- Basic horizontal list group (starting sm screen) -->
<ul class="list-group list-group-horizontal-sm">
  <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>
</ul>

<!-- Justified horizontal list group (starting sm screen) -->
<ul class="list-group list-group-horizontal-sm">
  <li class="list-group-item flex-fill text-center">Cras justo odio</li>
  <li class="list-group-item flex-fill text-center">Dapibus ac facilisis in</li>
  <li class="list-group-item flex-fill text-center">Morbi leo risus</li>
</ul>
// Basic horizontal list group (starting sm screen)
ul.list-group.list-group-horizontal-sm
  li.list-group-item
    | Cras justo odio
  li.list-group-item
    | Dapibus ac facilisis in
  li.list-group-item
    | Morbi leo risus

// Justified horizontal list group (starting sm screen)
ul.list-group.list-group-horizontal-sm
  li.list-group-item.flex-fill.text-center
    | Cras justo odio
  li.list-group-item.flex-fill.text-center
    | Dapibus ac facilisis in
  li.list-group-item.flex-fill.text-center
    | Morbi leo risus

Actionable horizontal list group

<!-- Actionable horizontal list group (starting sm screen) -->
<div class="list-group list-group-horizontal-sm">
  <a href="#" class="list-group-item list-group-item-action active text-center">Active item here</a>
  <a href="#" class="list-group-item list-group-item-action text-center">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-action text-center">Morbi leo risus</a>
</div>
// Actionable horizontal list group (starting sm screen)
.list-group.list-group-horizontal-sm
  a(href="#").list-group-item.list-group-item-action.active.text-center
    | Active item here
  a(href="#").list-group-item.list-group-item-action.text-center
    | Dapibus ac facilisis in
  a(href="#").list-group-item.list-group-item-action.text-center
    | Morbi leo risus

Custom content

<!-- List group with custom content -->
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action flex-column align-items-start py-3 active">
    <div class="d-flex flex-wrap w-100 justify-content-between">
      <h6 class="text-white">List group item heading</h6>
      <small class="text-white opacity-60 mb-2">3 days ago</small>
    </div>
    <p class="fs-sm fw-normal text-white opacity-75">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. Excepteur sint occaecat cupidatat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit.</p>
    <small class="text-white opacity-60">Donec id elit non mi porta.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action flex-column align-items-start py-3">
    <div class="d-flex flex-wrap w-100 justify-content-between">
      <h6>List group item heading</h6>
      <small class="text-muted mb-2">3 days ago</small>
    </div>
    <p class="fs-sm fw-normal text-body">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. Excepteur sint occaecat cupidatat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit.</p>
    <small class="text-muted">Donec id elit non mi porta.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action flex-column align-items-start py-3">
    <div class="d-flex flex-wrap w-100 justify-content-between">
      <h6>List group item heading</h6>
      <small class="text-muted mb-2">3 days ago</small>
    </div>
    <p class="fs-sm fw-normal text-body">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. Excepteur sint occaecat cupidatat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit.</p>
    <small class="text-muted">Donec id elit non mi porta.</small>
  </a>
</div>
// List group with custom content
.list-group
  a(href="#").list-group-item.list-group-item-action.flex-column.align-items-start.py-3.active
    .d-flex.flex-wrap.w-100.justify-content-between
      h6.text-white
        | List group item heading
      small.text-white.opacity-60.mb-2
        | 3 days ago
    p.fs-sm.fw-normal.text-white.opacity-75
      | Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. Excepteur sint occaecat cupidatat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit.
    small.text-white.opacity-60
      | Donec id elit non mi porta.
  a(href="#").list-group-item.list-group-item-action.flex-column.align-items-start.py-3
    .d-flex.flex-wrap.w-100.justify-content-between
      h6
        | List group item heading
      small.text-muted.mb-2
        | 3 days ago
    p.fs-sm.fw-normal.text-body
      | Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. Excepteur sint occaecat cupidatat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit.
    small.text-muted
      | Donec id elit non mi porta.
  a(href="#").list-group-item.list-group-item-action.flex-column.align-items-start.py-3
    .d-flex.flex-wrap.w-100.justify-content-between
      h6
        | List group item heading
      small.text-muted.mb-2
        | 3 days ago
    p.fs-sm.fw-normal.text-body
      | Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. Excepteur sint occaecat cupidatat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit.
    small.text-muted
      | Donec id elit non mi porta.

JavaScript behavior

HomeProfileMessagesSettings
Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing exercitation fugiat tempor. Voluptate deserunt sit sunt nisi aliqua fugiat proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad non minim tempor sunt voluptate consectetur exercitation id ut nulla. Ea et fugiat aliquip nostrud sunt incididunt consectetur culpa aliquip eiusmod dolor. Anim ad Lorem aliqua in cupidatat nisi enim.
Cupidatat quis ad sint excepteur laborum in esse qui. Et excepteur consectetur ex nisi eu do cillum ad laborum. Mollit et eu officia dolore sunt Lorem culpa qui commodo velit ex amet id ex. Officia anim incididunt laboris deserunt anim aute dolor incididunt veniam aute dolore do exercitation. Dolor nisi culpa ex ad irure in elit eu dolore. Ad laboris ipsum reprehenderit irure non commodo enim culpa commodo.
Ut ut do pariatur aliquip aliqua aliquip exercitation do nostrud commodo reprehenderit aute ipsum voluptate. Irure Lorem et laboris nostrud amet cupidatat cupidatat anim do ut velit mollit consequat enim tempor. Consectetur est minim nostrud nostrud consectetur irure labore voluptate irure. Ipsum id Lorem sit sint voluptate est pariatur eu ad cupidatat et deserunt culpa sit eiusmod deserunt. Consectetur et fugiat anim do eiusmod aliquip nulla laborum elit adipisicing.
Irure enim occaecat labore sit qui aliquip reprehenderit amet velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna sit occaecat laboris sunt dolor. Nisi eu minim cillum occaecat aute est cupidatat aliqua labore aute occaecat ea aliquip sunt amet. Aute mollit dolor ut exercitation irure commodo non amet consectetur quis amet culpa. Quis ullamco nisi amet qui aute irure eu. Magna labore dolor quis ex labore id nostrud deserunt dolor eiusmod eu pariatur culpa mollit in irure.
<!-- JavaScript behavior -->
<div class="row">
  <div class="col-md-4">
    <div class="list-group" role="tablist">
      <a href="#list-home" id="list-home-list" class="list-group-item list-group-item-action active" data-bs-toggle="list" role="tab" aria-controls="list-home">
        Home
      </a>
      <a href="#list-profile" id="list-profile-list" class="list-group-item list-group-item-action" data-bs-toggle="list" role="tab" aria-controls="list-profile">
        Profile
      </a>
      <a href="#list-messages" id="list-messages-list" class="list-group-item list-group-item-action" data-bs-toggle="list" role="tab" aria-controls="list-messages">
        Messages
      </a>
      <a href="#list-settings" id="list-settings-list" class="list-group-item list-group-item-action" data-bs-toggle="list" role="tab" aria-controls="list-settings">
        Settings
      </a>
    </div>
  </div>
  <div class="col-md-8 pt-4 pt-md-0">
    <div class="tab-content">
      <div id="list-home" class="tab-pane fade show active" role="tabpanel" aria-labelledby="list-home-list">...</div>
      <div id="list-profile" class="tab-pane fade" role="tabpanel" aria-labelledby="list-profile-list">...</div>
      <div id="list-messages" class="tab-pane fade" role="tabpanel" aria-labelledby="list-messages-list">...</div>
      <div id="list-settings" class="tab-pane fade" role="tabpanel" aria-labelledby="list-settings-list">...</div>
    </div>
  </div>
</div>
// JavaScript behavior
.row
  .col-md-4
    .list-group(role="tablist")
      a(href="#list-home", data-bs-toggle="list", role="tab", aria-controls="list-home")#list-home-list.list-group-item.list-group-item-action.active
        | Home
      a(href="#list-profile", data-bs-toggle="list" role="tab", aria-controls="list-profile")#list-profile-list.list-group-item.list-group-item-action
        | Profile
      a(href="#list-messages", data-bs-toggle="list", role="tab", aria-controls="list-messages")#list-messages-list.list-group-item.list-group-item-action
        | Messages
      a(href="#list-settings", data-bs-toggle="list", role="tab", aria-controls="list-settings")#list-settings-list.list-group-item.list-group-item-action
        | Settings
  .col-md-8.pt-4.pt-md-0
    .tab-content
      #list-home.tab-pane.fade.show.active(role="tabpanel", aria-labelledby="list-home-list")
        | ...
      #list-profile.tab-pane.fade(role="tabpanel", aria-labelledby="list-profile-list")
        | ...
      #list-messages.tab-pane.fade(role="tabpanel", aria-labelledby="list-messages-list")
        | ...
      #list-settings.tab-pane.fade(role="tabpanel", aria-labelledby="list-settings-list")
        | ...