ListGroup

Basic

<c-bs-list-group>
  <c-bs-list-group-item>An item</c-bs-list-group-item>
  <c-bs-list-group-item>A second item</c-bs-list-group-item>
  <c-bs-list-group-item>A third item</c-bs-list-group-item>
  <c-bs-list-group-item>A fourth item</c-bs-list-group-item>
  <c-bs-list-group-item>And a fifth one</c-bs-list-group-item>
</c-bs-list-group>

Preview:

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

Active Items

<c-bs-list-group>
  <c-bs-list-group-item c-active="True">An active item</c-bs-list-group-item>
  <c-bs-list-group-item>A second item</c-bs-list-group-item>
  <c-bs-list-group-item>A third item</c-bs-list-group-item>
  <c-bs-list-group-item>A fourth item</c-bs-list-group-item>
  <c-bs-list-group-item>And a fifth one</c-bs-list-group-item>
</c-bs-list-group>

Preview:

  • An active item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one

Disabled Items

<c-bs-list-group>
  <c-bs-list-group-item>An item</c-bs-list-group-item>
  <c-bs-list-group-item>A second item</c-bs-list-group-item>
  <c-bs-list-group-item>A third item</c-bs-list-group-item>
  <c-bs-list-group-item>A fourth item</c-bs-list-group-item>
  <c-bs-list-group-item c-disabled="True">A disabled fifth item</c-bs-list-group-item>
</c-bs-list-group>

Preview:

  • An item
  • A second item
  • A third item
  • A fourth item
  • A disabled fifth item 
<c-bs-list-group as_="div">
  <c-bs-list-group-item href="#" c-active="True">The current link item</c-bs-list-group-item>
  <c-bs-list-group-item href="#">A second link item</c-bs-list-group-item>
  <c-bs-list-group-item href="#">A third link item</c-bs-list-group-item>
  <c-bs-list-group-item href="#">A fourth link item</c-bs-list-group-item>
  <c-bs-list-group-item href="#" c-disabled="True">A disabled link item</c-bs-list-group-item>
</c-bs-list-group>

Preview:

The current link item A second link item A third link item A fourth link item A disabled link item

Buttons

<c-bs-list-group as_="div">
  <c-bs-list-group-item as_="button" c-active="True">The current button</c-bs-list-group-item>
  <c-bs-list-group-item as_="button">A second button item</c-bs-list-group-item>
  <c-bs-list-group-item as_="button">A third button item</c-bs-list-group-item>
  <c-bs-list-group-item as_="button">A fourth button item</c-bs-list-group-item>
  <c-bs-list-group-item as_="button" c-disabled="True">A disabled button item</c-bs-list-group-item>
</c-bs-list-group>

Preview:

Flush

<c-bs-list-group c-flush="True">
  <c-bs-list-group-item>An item</c-bs-list-group-item>
  <c-bs-list-group-item>A second item</c-bs-list-group-item>
  <c-bs-list-group-item>A third item</c-bs-list-group-item>
  <c-bs-list-group-item>A fourth item</c-bs-list-group-item>
  <c-bs-list-group-item>And a fifth one</c-bs-list-group-item>
</c-bs-list-group>

Preview:

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

Numbered

<c-bs-list-group c-numbered="True">
  <c-bs-list-group-item>A list item</c-bs-list-group-item>
  <c-bs-list-group-item>A list item</c-bs-list-group-item>
  <c-bs-list-group-item>A list item</c-bs-list-group-item>
</c-bs-list-group>

Preview:

  1. A list item
  2. A list item
  3. A list item

Numbered With Custom Content

<c-bs-list-group c-numbered="True">
  <c-bs-list-group-item c-attrs="{'class': 'd-flex justify-content-between align-items-start'}">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Content for list item
    </div>
    <c-bs-badge bg="primary" c-pill="True">14</c-bs-badge>
  </c-bs-list-group-item>
  <c-bs-list-group-item c-attrs="{'class': 'd-flex justify-content-between align-items-start'}">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Content for list item
    </div>
    <c-bs-badge bg="primary" c-pill="True">14</c-bs-badge>
  </c-bs-list-group-item>
  <c-bs-list-group-item c-attrs="{'class': 'd-flex justify-content-between align-items-start'}">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Content for list item
    </div>
    <c-bs-badge bg="primary" c-pill="True">14</c-bs-badge>
  </c-bs-list-group-item>
</c-bs-list-group>

Preview:

  1. Subheading
    Content for list item
    14
  2. Subheading
    Content for list item
    14
  3. Subheading
    Content for list item
    14

Horizontal

<c-bs-list-group c-horizontal="True">
  <c-bs-list-group-item>An item</c-bs-list-group-item>
  <c-bs-list-group-item>A second item</c-bs-list-group-item>
  <c-bs-list-group-item>A third item</c-bs-list-group-item>
</c-bs-list-group>

Preview:

  • An item
  • A second item
  • A third item

Horizontal Responsive Sm

<c-bs-list-group horizontal="sm">
  <c-bs-list-group-item>An item</c-bs-list-group-item>
  <c-bs-list-group-item>A second item</c-bs-list-group-item>
  <c-bs-list-group-item>A third item</c-bs-list-group-item>
</c-bs-list-group>

Preview:

  • An item
  • A second item
  • A third item

Horizontal Responsive Md

<c-bs-list-group horizontal="md">
  <c-bs-list-group-item>An item</c-bs-list-group-item>
  <c-bs-list-group-item>A second item</c-bs-list-group-item>
  <c-bs-list-group-item>A third item</c-bs-list-group-item>
</c-bs-list-group>

Preview:

  • An item
  • A second item
  • A third item

Contextual Variants

<c-bs-list-group>
  <c-bs-list-group-item>A simple default list group item</c-bs-list-group-item>
  <c-bs-list-group-item variant="primary">A simple primary item</c-bs-list-group-item>
  <c-bs-list-group-item variant="secondary">A simple secondary item</c-bs-list-group-item>
  <c-bs-list-group-item variant="success">A simple success item</c-bs-list-group-item>
  <c-bs-list-group-item variant="danger">A simple danger item</c-bs-list-group-item>
  <c-bs-list-group-item variant="warning">A simple warning item</c-bs-list-group-item>
  <c-bs-list-group-item variant="info">A simple info item</c-bs-list-group-item>
  <c-bs-list-group-item variant="light">A simple light item</c-bs-list-group-item>
  <c-bs-list-group-item variant="dark">A simple dark item</c-bs-list-group-item>
</c-bs-list-group>

Preview:

  • A simple default list group item
  • A simple primary item
  • A simple secondary item
  • A simple success item
  • A simple danger item
  • A simple warning item
  • A simple info item
  • A simple light item
  • A simple dark item 
<c-bs-list-group as_="div">
  <c-bs-list-group-item href="#">A simple default item</c-bs-list-group-item>
  <c-bs-list-group-item href="#" variant="primary">A simple primary item</c-bs-list-group-item>
  <c-bs-list-group-item href="#" variant="secondary">A simple secondary item</c-bs-list-group-item>
  <c-bs-list-group-item href="#" variant="success">A simple success item</c-bs-list-group-item>
  <c-bs-list-group-item href="#" variant="danger">A simple danger item</c-bs-list-group-item>
  <c-bs-list-group-item href="#" variant="warning">A simple warning item</c-bs-list-group-item>
  <c-bs-list-group-item href="#" variant="info">A simple info item</c-bs-list-group-item>
  <c-bs-list-group-item href="#" variant="light">A simple light item</c-bs-list-group-item>
  <c-bs-list-group-item href="#" variant="dark">A simple dark item</c-bs-list-group-item>
</c-bs-list-group>

Preview:

A simple default item A simple primary item A simple secondary item A simple success item A simple danger item A simple warning item A simple info item A simple light item A simple dark item

With Badges

<c-bs-list-group>
  <c-bs-list-group-item c-attrs="{'class': 'd-flex justify-content-between align-items-center'}">
    A list item
    <c-bs-badge bg="primary" c-pill="True">14</c-bs-badge>
  </c-bs-list-group-item>
  <c-bs-list-group-item c-attrs="{'class': 'd-flex justify-content-between align-items-center'}">
    A second list item
    <c-bs-badge bg="primary" c-pill="True">2</c-bs-badge>
  </c-bs-list-group-item>
  <c-bs-list-group-item c-attrs="{'class': 'd-flex justify-content-between align-items-center'}">
    A third list item
    <c-bs-badge bg="primary" c-pill="True">1</c-bs-badge>
  </c-bs-list-group-item>
</c-bs-list-group>

Preview:

  • A list item 14
  • A second list item 2
  • A third list item 1

Custom Content

<c-bs-list-group as_="div">
  <c-bs-list-group-item href="#" c-active="True">
    <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">Some placeholder content in a paragraph.</p>
    <small>And some small print.</small>
  </c-bs-list-group-item>
  <c-bs-list-group-item href="#">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <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-secondary">And some muted small print.</small>
  </c-bs-list-group-item>
  <c-bs-list-group-item href="#">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <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-secondary">And some muted small print.</small>
  </c-bs-list-group-item>
</c-bs-list-group>

Preview:

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.

With Checkboxes

<c-bs-list-group>
  <c-bs-list-group-item>
    <c-bs-form-check-input c-value="''" c-attrs="{'class': 'me-1', 'id': 'firstCheckbox'}" />
    <c-bs-form-check-label for_="firstCheckbox">First checkbox</c-bs-form-check-label>
  </c-bs-list-group-item>
  <c-bs-list-group-item>
    <c-bs-form-check-input c-value="''" c-attrs="{'class': 'me-1', 'id': 'secondCheckbox'}" />
    <c-bs-form-check-label for_="secondCheckbox">Second checkbox</c-bs-form-check-label>
  </c-bs-list-group-item>
  <c-bs-list-group-item>
    <c-bs-form-check-input c-value="''" c-attrs="{'class': 'me-1', 'id': 'thirdCheckbox'}" />
    <c-bs-form-check-label for_="thirdCheckbox">Third checkbox</c-bs-form-check-label>
  </c-bs-list-group-item>
</c-bs-list-group>

Preview:

With Radio Buttons

<c-bs-list-group>
  <c-bs-list-group-item>
    <c-bs-form-check-input type="radio" name="listGroupRadio" c-value="''" c-checked="True" c-attrs="{'class': 'me-1', 'id': 'firstRadio'}" />
    <c-bs-form-check-label for_="firstRadio">First radio</c-bs-form-check-label>
  </c-bs-list-group-item>
  <c-bs-list-group-item>
    <c-bs-form-check-input type="radio" name="listGroupRadio" c-value="''" c-attrs="{'class': 'me-1', 'id': 'secondRadio'}" />
    <c-bs-form-check-label for_="secondRadio">Second radio</c-bs-form-check-label>
  </c-bs-list-group-item>
  <c-bs-list-group-item>
    <c-bs-form-check-input type="radio" name="listGroupRadio" c-value="''" c-attrs="{'class': 'me-1', 'id': 'thirdRadio'}" />
    <c-bs-form-check-label for_="thirdRadio">Third radio</c-bs-form-check-label>
  </c-bs-list-group-item>
</c-bs-list-group>

Preview: