ListGroup

Basic

{% component "ListGroup" %}
                {% component "ListGroupItem" %}An item{% endcomponent %}
                {% component "ListGroupItem" %}A second item{% endcomponent %}
                {% component "ListGroupItem" %}A third item{% endcomponent %}
                {% component "ListGroupItem" %}A fourth item{% endcomponent %}
                {% component "ListGroupItem" %}And a fifth one{% endcomponent %}
            {% endcomponent %}

Preview:

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

Active Items

{% component "ListGroup" %}
                {% component "ListGroupItem" active=True %}An active item{% endcomponent %}
                {% component "ListGroupItem" %}A second item{% endcomponent %}
                {% component "ListGroupItem" %}A third item{% endcomponent %}
                {% component "ListGroupItem" %}A fourth item{% endcomponent %}
                {% component "ListGroupItem" %}And a fifth one{% endcomponent %}
            {% endcomponent %}

Preview:

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

Disabled Items

{% component "ListGroup" %}
                {% component "ListGroupItem" %}An item{% endcomponent %}
                {% component "ListGroupItem" %}A second item{% endcomponent %}
                {% component "ListGroupItem" %}A third item{% endcomponent %}
                {% component "ListGroupItem" %}A fourth item{% endcomponent %}
                {% component "ListGroupItem" disabled=True %}A disabled fifth item{% endcomponent %}
            {% endcomponent %}

Preview:

An item
A second item
A third item
A fourth item
A disabled fifth item

Links

{% component "ListGroup" as_="div" %}
                {% component "ListGroupItem" href="#" active=True %}The current link item{% endcomponent %}
                {% component "ListGroupItem" href="#" %}A second link item{% endcomponent %}
                {% component "ListGroupItem" href="#" %}A third link item{% endcomponent %}
                {% component "ListGroupItem" href="#" %}A fourth link item{% endcomponent %}
                {% component "ListGroupItem" href="#" disabled=True %}A disabled link item{% endcomponent %}
            {% endcomponent %}

Preview:

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

Buttons

{% component "ListGroup" as_="div" %}
                {% component "ListGroupItem" as_="button" active=True %}The current button{% endcomponent %}
                {% component "ListGroupItem" as_="button" %}A second button item{% endcomponent %}
                {% component "ListGroupItem" as_="button" %}A third button item{% endcomponent %}
                {% component "ListGroupItem" as_="button" %}A fourth button item{% endcomponent %}
                {% component "ListGroupItem" as_="button" disabled=True %}A disabled button item{% endcomponent %}
            {% endcomponent %}

Preview:

Flush

{% component "ListGroup" flush=True %}
                {% component "ListGroupItem" %}An item{% endcomponent %}
                {% component "ListGroupItem" %}A second item{% endcomponent %}
                {% component "ListGroupItem" %}A third item{% endcomponent %}
                {% component "ListGroupItem" %}A fourth item{% endcomponent %}
                {% component "ListGroupItem" %}And a fifth one{% endcomponent %}
            {% endcomponent %}

Preview:

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

Numbered

{% component "ListGroup" numbered=True %}
                {% component "ListGroupItem" %}A list item{% endcomponent %}
                {% component "ListGroupItem" %}A list item{% endcomponent %}
                {% component "ListGroupItem" %}A list item{% endcomponent %}
            {% endcomponent %}

Preview:

A list item
A list item
A list item

Numbered With Custom Content

{% component "ListGroup" numbered=True %}
                {% component "ListGroupItem" 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>
                    <span class="badge text-bg-primary rounded-pill">14</span>
                {% endcomponent %}
                {% component "ListGroupItem" 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>
                    <span class="badge text-bg-primary rounded-pill">14</span>
                {% endcomponent %}
                {% component "ListGroupItem" 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>
                    <span class="badge text-bg-primary rounded-pill">14</span>
                {% endcomponent %}
            {% endcomponent %}

Preview:

Subheading
Content for list item
14
Subheading
Content for list item
14
Subheading
Content for list item
14

Horizontal

{% component "ListGroup" horizontal=True %}
                {% component "ListGroupItem" %}An item{% endcomponent %}
                {% component "ListGroupItem" %}A second item{% endcomponent %}
                {% component "ListGroupItem" %}A third item{% endcomponent %}
            {% endcomponent %}

Preview:

An item
A second item
A third item

Horizontal Responsive Sm

{% component "ListGroup" horizontal="sm" %}
                {% component "ListGroupItem" %}An item{% endcomponent %}
                {% component "ListGroupItem" %}A second item{% endcomponent %}
                {% component "ListGroupItem" %}A third item{% endcomponent %}
            {% endcomponent %}

Preview:

An item
A second item
A third item

Horizontal Responsive Md

{% component "ListGroup" horizontal="md" %}
                {% component "ListGroupItem" %}An item{% endcomponent %}
                {% component "ListGroupItem" %}A second item{% endcomponent %}
                {% component "ListGroupItem" %}A third item{% endcomponent %}
            {% endcomponent %}

Preview:

An item
A second item
A third item

Contextual Variants

{% component "ListGroup" %}
                {% component "ListGroupItem" %}A simple default list group item{% endcomponent %}
                {% component "ListGroupItem" variant="primary" %}A simple primary item{% endcomponent %}
                {% component "ListGroupItem" variant="secondary" %}A simple secondary item{% endcomponent %}
                {% component "ListGroupItem" variant="success" %}A simple success item{% endcomponent %}
                {% component "ListGroupItem" variant="danger" %}A simple danger item{% endcomponent %}
                {% component "ListGroupItem" variant="warning" %}A simple warning item{% endcomponent %}
                {% component "ListGroupItem" variant="info" %}A simple info item{% endcomponent %}
                {% component "ListGroupItem" variant="light" %}A simple light item{% endcomponent %}
                {% component "ListGroupItem" variant="dark" %}A simple dark item{% endcomponent %}
            {% endcomponent %}

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

Contextual Variants For Links

{% component "ListGroup" as_="div" %}
                {% component "ListGroupItem" href="#" %}A simple default item{% endcomponent %}
                {% component "ListGroupItem" href="#" variant="primary" %}A simple primary item{% endcomponent %}
                {% component "ListGroupItem" href="#" variant="secondary" %}A simple secondary item{% endcomponent %}
                {% component "ListGroupItem" href="#" variant="success" %}A simple success item{% endcomponent %}
                {% component "ListGroupItem" href="#" variant="danger" %}A simple danger item{% endcomponent %}
                {% component "ListGroupItem" href="#" variant="warning" %}A simple warning item{% endcomponent %}
                {% component "ListGroupItem" href="#" variant="info" %}A simple info item{% endcomponent %}
                {% component "ListGroupItem" href="#" variant="light" %}A simple light item{% endcomponent %}
                {% component "ListGroupItem" href="#" variant="dark" %}A simple dark item{% endcomponent %}
            {% endcomponent %}

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

{% component "ListGroup" %}
                {% component "ListGroupItem" attrs:class="d-flex justify-content-between align-items-center" %}
                    A list item
                    <span class="badge text-bg-primary rounded-pill">14</span>
                {% endcomponent %}
                {% component "ListGroupItem" attrs:class="d-flex justify-content-between align-items-center" %}
                    A second list item
                    <span class="badge text-bg-primary rounded-pill">2</span>
                {% endcomponent %}
                {% component "ListGroupItem" attrs:class="d-flex justify-content-between align-items-center" %}
                    A third list item
                    <span class="badge text-bg-primary rounded-pill">1</span>
                {% endcomponent %}
            {% endcomponent %}

Preview:

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

Custom Content

{% component "ListGroup" as_="div" %}
                {% component "ListGroupItem" href="#" 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>
                {% endcomponent %}
                {% component "ListGroupItem" 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>
                {% endcomponent %}
                {% component "ListGroupItem" 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>
                {% endcomponent %}
            {% endcomponent %}

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

{% component "ListGroup" %}
                {% component "ListGroupItem" %}
                    <input class="form-check-input me-1" type="checkbox" value="" id="firstCheckbox">
                    <label class="form-check-label" for="firstCheckbox">First checkbox</label>
                {% endcomponent %}
                {% component "ListGroupItem" %}
                    <input class="form-check-input me-1" type="checkbox" value="" id="secondCheckbox">
                    <label class="form-check-label" for="secondCheckbox">Second checkbox</label>
                {% endcomponent %}
                {% component "ListGroupItem" %}
                    <input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckbox">
                    <label class="form-check-label" for="thirdCheckbox">Third checkbox</label>
                {% endcomponent %}
            {% endcomponent %}

Preview:

First checkbox
Second checkbox
Third checkbox

With Radio Buttons

{% component "ListGroup" %}
                {% component "ListGroupItem" %}
                    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="firstRadio" checked>
                    <label class="form-check-label" for="firstRadio">First radio</label>
                {% endcomponent %}
                {% component "ListGroupItem" %}
                    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="secondRadio">
                    <label class="form-check-label" for="secondRadio">Second radio</label>
                {% endcomponent %}
                {% component "ListGroupItem" %}
                    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="thirdRadio">
                    <label class="form-check-label" for="thirdRadio">Third radio</label>
                {% endcomponent %}
            {% endcomponent %}

Preview:

First radio
Second radio
Third radio

Keys	Action
`?`	Open this help
`n`	Next page
`p`	Previous page
`s`	Search