Silicon Silicon UI Kit
 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>

Flush

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
Dapibus ac facilisis in Active item here Porta ac consectetur ac Disabled item here 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 actionable 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>

With icons & badges

  • Messages 14
  • Orders 2
  • Favorites 6 
<!-- List group with icons and badges -->
<ul class="list-group">
  <li class="list-group-item d-flex align-items-center">
    <i class="bx bx-message fs-lg opacity-70 me-2"></i>
    Messages
    <span class="badge rounded-pill bg-success ms-auto">14</span>
  </li>
  <li class="list-group-item d-flex align-items-center">
    <i class="bx bx-cart fs-lg opacity-70 me-2"></i>
    Orders
    <span class="badge rounded-pill bg-warning ms-auto">2</span></li>
  <li class="list-group-item d-flex align-items-center">
    <i class="bx bx-heart fs-lg opacity-70 mt-n1 me-2"></i>
    Favorites
    <span class="badge rounded-pill bg-danger ms-auto">6</span>
  </li>
</ul>

Numbered list group

  1. Cras justo odio
  2. Dapibus ac facilisis in
  3. Morbi leo risus
<!-- Numbered list group -->
<ol class="list-group list-group-numbered">
  <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>
</ol>

Horizontal list group

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
<!-- 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>

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

Tabs-like behavior

Home Profile Messages
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 eu nostrud.
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 veniam.
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 pariatur cillum.
<!-- Tabs-like 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>
    </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>
  </div>
</div>
Top