Cartzilla Docs | List group

Basic example

A first item
An active item
A third item
A disabled item
And a fifth one

<!-- Basic list group -->
<ul class="list-group">
  <li class="list-group-item">A first item</li>
  <li class="list-group-item active" aria-current="true">An active item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item disabled" aria-disabled="true">A disabled item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

Borderless

A first item
An active item
A third item
A disabled item
And a fifth one

<!-- Borderless list group -->
<ul class="list-group list-group-borderless">
  <li class="list-group-item">A first item</li>
  <li class="list-group-item active" aria-current="true">An active item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item disabled" aria-disabled="true">A disabled item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

Links or buttons

A first link item The current link item A third link item A disabled link item And a fifth link item

<!-- Actionable list group made of links -->
<div class="list-group">
  <a class="list-group-item list-group-item-action" href="#">A first link item</a>
  <a class="list-group-item list-group-item-action active" href="#" aria-current="true">The current link item</a>
  <a class="list-group-item list-group-item-action" href="#">A third link item</a>
  <a class="list-group-item list-group-item-action disabled" aria-disabled="true">A disabled link item</a>
  <a class="list-group-item list-group-item-action" href="#">And a fifth link item</a>
</div>

<!-- Actionable borderless list group made of buttons -->
<div class="list-group list-group-borderless">
  <button type="button" class="list-group-item list-group-item-action">A first button item</button>
  <button type="button" class="list-group-item list-group-item-action active" aria-current="true">The current button item</button>
  <button type="button" class="list-group-item list-group-item-action">A third button item</button>
  <button type="button" class="list-group-item list-group-item-action disabled" aria-disabled="true">A disabled button item</button>
  <button type="button" class="list-group-item list-group-item-action">And a fifth button item</button>
</div>

Flush

A first item
An second item
A third item
A fourth item
And a fifth one

<!-- Flush list group to render items edge-to-edge in a parent container (e.g., cards) -->
<ul class="list-group list-group-flush">
  <li class="list-group-item">A first item</li>
  <li class="list-group-item">An second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

With icons and badges

Messages 5 Orders 3 Notifications 7 Favorites 2

<!-- List group with icons and badges -->
<div class="list-group">
  <a class="list-group-item list-group-item-action d-flex align-items-center" href="#">
    <i class="ci-message-circle fs-base opacity-75 me-2"></i>
    Messages
    <span class="badge bg-info rounded-pill ms-auto">5</span>
  </a>
  <a class="list-group-item list-group-item-action d-flex align-items-center" href="#">
    <i class="ci-shopping-bag fs-base opacity-75 me-2"></i>
    Orders
    <span class="badge bg-warning rounded-pill ms-auto">3</span>
  </a>
  <a class="list-group-item list-group-item-action d-flex align-items-center" href="#">
    <i class="ci-bell fs-base opacity-75 me-2"></i>
    Notifications
    <span class="badge bg-success rounded-pill ms-auto">7</span>
  </a>
  <a class="list-group-item list-group-item-action d-flex align-items-center" href="#">
    <i class="ci-heart fs-base opacity-75 me-2"></i>
    Favorites
    <span class="badge bg-danger rounded-pill ms-auto">2</span>
  </a>
</div>

Checkboxes and radios

First checkbox Second checkbox Third checkbox Fourth checkbox

First radio Second radio Third radio Fourth radio

<!-- List group with checkboxes -->
<div class="list-group">
  <label class="list-group-item">
    <input class="form-check-input me-2" type="checkbox" value="first" checked>
    First checkbox
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-2" type="checkbox" value="second">
    Second checkbox
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-2" type="checkbox" value="third">
    Third checkbox
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-2" type="checkbox" value="fourth">
    Fourth checkbox
  </label>
</div>

<!-- List group with radio buttons -->
<div class="list-group">
  <label class="list-group-item">
    <input class="form-check-input me-2" type="radio" name="lg-radio" value="first" checked>
    First radio
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-2" type="radio" name="lg-radio" value="second">
    Second radio
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-2" type="radio" name="lg-radio" value="third">
    Third radio
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-2" type="radio" name="lg-radio" value="fourth">
    Fourth radio
  </label>
</div>

Numbered list group

A list item
A list item
A list item
A list item

<!-- Numbered list group -->
<ol class="list-group list-group-numbered">
  <li class="list-group-item">A list item</li>
  <li class="list-group-item">A list item</li>
  <li class="list-group-item">A list item</li>
  <li class="list-group-item">A list item</li>
</ol>

Horizontal list group

A first item
A second item
A third item

A first item
A second item
A third item

An active link A second link A third link

A first link An active link A third link

<!-- Basic horizontal list group. Alternatively, choose a responsive variant .list-group-horizontal-{sm|md|lg|xl|xxl} to make a list group horizontal starting at that breakpoint's min-width -->
<ul class="list-group list-group-horizontal">
  <li class="list-group-item">A first item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>

<!-- Justified horizontal list group -->
<ul class="list-group list-group-horizontal">
  <li class="list-group-item flex-fill text-center">A first item</li>
  <li class="list-group-item flex-fill text-center">A second item</li>
  <li class="list-group-item flex-fill text-center">A third item</li>
</ul>

<!-- Actionable (links) horizontal list group -->
<div class="list-group list-group-horizontal">
  <a class="list-group-item list-group-item-action text-center active" href="#" aria-current="true">An active link</a>
  <a class="list-group-item list-group-item-action text-center" href="#">A second link</a>
  <a class="list-group-item list-group-item-action text-center" href="#">A third link</a>
</div>

<!-- Actionable (links) borderless horizontal list group -->
<div class="list-group list-group-borderless list-group-horizontal">
  <a class="list-group-item list-group-item-action text-center active" href="#" aria-current="true">An active link</a>
  <a class="list-group-item list-group-item-action text-center" href="#">A second link</a>
  <a class="list-group-item list-group-item-action text-center" href="#">A third link</a>
</div>

Custom content

List group item heading

3 days ago

Some placeholder content in a paragraph.

And some small print.

List group item heading

3 days ago

Some placeholder content in a paragraph.

And some muted small print.

List group item heading

3 days ago

Some placeholder content in a paragraph.

And some muted small print.

<!-- List group with custom content -->
<div class="list-group">
  <a class="list-group-item list-group-item-action p-3 fw-normal active" href="#" aria-current="true">
    <div class="d-flex w-100 justify-content-between">
      <h6 class="mb-1">List group item heading</h6>
      <small>3 days ago</small>
    </div>
    <p class="mb-1">Some placeholder content in a paragraph.</p>
    <small>And some small print.</small>
  </a>
  <a class="list-group-item list-group-item-action p-3 fw-normal" href="#">
    <div class="d-flex w-100 justify-content-between">
      <h6 class="mb-1">List group item heading</h6>
      <small class="text-body-secondary">3 days ago</small>
    </div>
    <p class="mb-1">Some placeholder content in a paragraph.</p>
    <small class="text-body-tertiary">And some muted small print.</small>
  </a>
  <a class="list-group-item list-group-item-action p-3 fw-normal" href="#">
    <div class="d-flex w-100 justify-content-between">
      <h6 class="mb-1">List group item heading</h6>
      <small class="text-body-secondary">3 days ago</small>
    </div>
    <p class="mb-1">Some placeholder content in a paragraph.</p>
    <small class="text-body-tertiary">And some muted small print.</small>
  </a>
</div>

Color variations

A simple default 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 light list group item
A simple dark list group item

<!-- Use contextual classes to style list items with a stateful background and color. -->
<ul class="list-group">
  <li class="list-group-item">A simple default list group item</li>
  <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-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>

JavaScript behavior

Home Profile Messages Settings

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 voluptatum iure autem atque quaerat.

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 itaque dolores dolorum similique architecto.

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.

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.

<div class="row">
  <div class="col-md-4">

    <!-- Nav tabs in format of list group -->
    <div class="list-group" role="tablist">
      <a class="list-group-item list-group-item-action active" href="#list-home" data-bs-toggle="list" role="tab" aria-controls="list-home" id="list-home-list" aria-selected="true">Home</a>
      <a class="list-group-item list-group-item-action" href="#list-profile" data-bs-toggle="list" role="tab" aria-controls="list-profile" id="list-profile-list" aria-selected="false" tabindex="-1">Profile</a>
      <a class="list-group-item list-group-item-action" href="#list-messages" data-bs-toggle="list" role="tab" aria-controls="list-messages" id="list-messages-list" aria-selected="false" tabindex="-1">Messages</a>
      <a class="list-group-item list-group-item-action" href="#list-settings" data-bs-toggle="list" role="tab" aria-controls="list-settings" id="list-settings-list" aria-selected="false" tabindex="-1">Settings</a>
    </div>
  </div>
  <div class="col-md-8 pt-4 pt-md-0">

    <!-- Tab content -->
    <div class="tab-content">
      <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>

Customize theme

Colors

Primary

Success

Warning

Danger

Info

Direction

RTL

Border width, px

Rounding, rem

Cartzilla

List group

Basic example

Borderless

Links or buttons

Flush

With icons and badges

Checkboxes and radios

Numbered list group

Horizontal list group

Custom content

List group item heading

List group item heading

List group item heading

Color variations

JavaScript behavior