لیست گروهی

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

<!-- Actionalbe list group -->
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-action active">Active item here</a>
  <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">Disabled item here</a>
  <a href="#" class="list-group-item list-group-item-action">Vestibulum at eros</a>
</div>

// Actionalbe list group
.list-group
  a(href="#").list-group-item.list-group-item-action
    | Dapibus ac facilisis in
  a(href="#").list-group-item.list-group-item-action.active
    | Active item here
  a(href="#").list-group-item.list-group-item-action
    | Porta ac consectetur ac
  a(href="#", tabindex="-1", aria-disabled="true").list-group-item.list-group-item-action.disabled
    | Disabled item here
  a(href="#").list-group-item.list-group-item-action
    | 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

<!-- List group with icons and badges -->
<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    <span>
      <i class="fi-chat-left text-muted me-2"></i>
      Messages
    </span>
    <span class="badge bg-success">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    <span>
      <i class="fi-shopping-bag fs-lg mt-n1 text-muted me-2"></i>
      Orders
    </span>
    <span class="badge bg-warning">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    <span>
      <i class="fi-heart text-muted me-2"></i>
      Favorites
    </span>
    <span class="badge bg-danger">6</span>
  </li>
</ul>

// List group with icons and badges
ul.list-group
  li.list-group-item.d-flex.justify-content-between.align-items-center
    span
      i.fi-chat-left.text-muted.me-2
      | Messages
    span.badge.bg-success 14
  li.list-group-item.d-flex.justify-content-between.align-items-center
    span
      i.fi-shopping-bag.f-lg.mt-n1.text-muted.me-2
      | Orders
    span.badge.bg-warning 2
  li.list-group-item.d-flex.justify-content-between.align-items-center
    span
      i.fi-heart.text-muted.me-2
      | Favorites
    span.badge.bg-danger 6

<!-- 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 (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

<!-- Contextual classes on basic list group -->
<ul class="list-group">
  <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-accent">A simple accent 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>

<!-- Contextual classes on actionable list group -->
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action list-group-item-primary">A simple primary list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">A simple secondary list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-accent">A simple accent list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-success">A simple success list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">A simple danger list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">A simple warning list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-info">A simple info list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-light">A simple light list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-dark">A simple dark list group item</a>
</div>

// Contextual classes on basic list group
ul.list-group
  li.list-group-item.list-group-item-primary A simple primary list group item
  li.list-group-item.list-group-item-secondary A simple secondary list group item
  li.list-group-item.list-group-item-accent A simple accent list group item
  li.list-group-item.list-group-item-success A simple success list group item
  li.list-group-item.list-group-item-danger A simple danger list group item
  li.list-group-item.list-group-item-warning A simple warning list group item
  li.list-group-item.list-group-item-info A simple info list group item
  li.list-group-item.list-group-item-light A simple light list group item
  li.list-group-item.list-group-item-dark A simple dark list group item

// Contextual classes on actionable list group
.list-group
  a(href="#").list-group-item.list-group-item-action.list-group-item-primary
    | A simple primary list group item
  a(href="#").list-group-item.list-group-item-action.list-group-item-secondary
    | A simple secondary list group item
  a(href="#").list-group-item.list-group-item-action.list-group-item-accent
    | A simple accent list group item
  a(href="#").list-group-item.list-group-item-action.list-group-item-success
    | A simple success list group item
  a(href="#").list-group-item.list-group-item-action.list-group-item-danger
    | A simple danger list group item
  a(href="#").list-group-item.list-group-item-action.list-group-item-warning
    | A simple warning list group item
  a(href="#").list-group-item.list-group-item-action.list-group-item-info
    | A simple info list group item
  a(href="#").list-group-item.list-group-item-action.list-group-item-light
    | A simple light list group item
  a(href="#").list-group-item.list-group-item-action.list-group-item-dark
    | A simple dark list group item

<!-- 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-50 mb-2">3 days ago</small>
    </div>
    <p class="fs-sm font-weight-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-50">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 font-weight-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 font-weight-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-50.mb-2
        | 3 days ago
    p.fs-sm.font-weight-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-50
      | 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.font-weight-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.font-weight-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 -->
<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-chat-lefts" id="list-chat-lefts-list" class="list-group-item list-group-item-action" data-bs-toggle="list" role="tab" aria-controls="list-chat-lefts">
        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-chat-lefts" class="tab-pane fade" role="tabpanel" aria-labelledby="list-chat-lefts-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-chat-lefts", data-bs-toggle="list", role="tab", aria-controls="list-chat-lefts")#list-chat-lefts-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-chat-lefts.tab-pane.fade(role="tabpanel", aria-labelledby="list-chat-lefts-list")
        | ...
      #list-settings.tab-pane.fade(role="tabpanel", aria-labelledby="list-settings-list")
        | ...