wovoui

List Group

List groups are a flexible and powerful component for displaying a series of content. List group items can be modified to support just about any content within. They can also be used as navigation via various props.

Basic example

The most basic list group is an unordered list with list items and the proper classes. Build upon it with the options that follow, or with your own CSS as needed.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros

<ListGroup>
<ListGroupItem>Cras justo odio</ListGroupItem>
<ListGroupItem>Dapibus ac facilisis in</ListGroupItem>
<ListGroupItem>Morbi leo risus</ListGroupItem>
<ListGroupItem>Porta ac consectetur ac</ListGroupItem>
<ListGroupItem>Vestibulum at eros</ListGroupItem>
</ListGroup>
1
2
3
4
5
6
7
8

Active items

Set prop active on the <ListGroupItem> which you want to be active.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros

<ListGroup>
<ListGroupItem>Cras justo odio</ListGroupItem>
<ListGroupItem active>Dapibus ac facilisis in</ListGroupItem>
<ListGroupItem>Morbi leo risus</ListGroupItem>
<ListGroupItem>Porta ac consectetur ac</ListGroupItem>
<ListGroupItem>Vestibulum at eros</ListGroupItem>
</ListGroup>
1
2
3
4
5
6
7
8

Disabled items

Set prop disabled on the <ListGroupItem> which you want to be disabled.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros

<ListGroup>
<ListGroupItem>Cras justo odio</ListGroupItem>
<ListGroupItem active>Dapibus ac facilisis in</ListGroupItem>
<ListGroupItem>Morbi leo risus</ListGroupItem>
<ListGroupItem>Porta ac consectetur ac</ListGroupItem>
<ListGroupItem>Vestibulum at eros</ListGroupItem>
</ListGroup>
1
2
3
4
5
6
7
8

To make actionable items by <a> or <button> use href attribute which will automatically create an <a> item or use button prop which will create items with button element.

The first two items are created using button element, which are actionable. And next two items are created using <a> element which are also actionable.


<ListGroup>
<ListGroupItem button>Cras justo odio</ListGroupItem>
<ListGroupItem button>Dapibus ac facilisis in</ListGroupItem>
<ListGroupItem href="#">Morbi leo risus</ListGroupItem>
<ListGroupItem href="#">Porta ac consectetur ac</ListGroupItem>
<ListGroupItem>Vestibulum at eros</ListGroupItem>
</ListGroup>
1
2
3
4
5
6
7
8

Flush

Add prop flush to remove some borders and rounded corners to render list group items edge-to-edge in a parent container (e.g., cards).

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros

<ListGroup flush>
<ListGroupItem>Cras justo odio</ListGroupItem>
<ListGroupItem>Dapibus ac facilisis in</ListGroupItem>
<ListGroupItem>Morbi leo risus</ListGroupItem>
<ListGroupItem>Porta ac consectetur ac</ListGroupItem>
<ListGroupItem>Vestibulum at eros</ListGroupItem>
</ListGroup>
1
2
3
4
5
6
7
8

Numbered

Add the prop numbered to opt into numbered list group items. Numbers are generated via CSS (as opposed to a <ol>s default browser styling) for better placement inside list group items and to allow for better customization.

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

When numbered prop is used, the default element of list-group changes to ol. Inspect the element in your browser and check the output for more details.


<ListGroup numbered>
<ListGroupItem>A list item</ListGroupItem>
<ListGroupItem>A list item</ListGroupItem>
<ListGroupItem>A list item</ListGroupItem>
</ListGroup>
1
2
3
4
5
6

These work great with custom content as well.

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

<ListGroup numbered>
<ListGroupItem 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>
    <Badge variant="primary" pill>14</Badge>
</ListGroupItem>
<ListGroupItem 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>
    <Badge variant="primary" pill>14</Badge>
</ListGroupItem>
<ListGroupItem 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>
    <Badge variant="primary" pill>14</Badge>
</ListGroupItem>
</ListGroup>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

Horizontal

Add value for the prop horizontal to change the layout of list group items from vertical to horizontal across all breakpoints. When value is true items are horizontal on all breakpoints. Alternatively, choose a responsive variant {sm|md|lg|xl|xxl} to make a list group horizontal starting at that breakpoint’s min-width. Currently horizontal list groups cannot be combined with flush list groups.

  • An item
  • A second item
  • A third item
  • An item
  • A second item
  • A third item
  • An item
  • A second item
  • A third item
  • An item
  • A second item
  • A third item
  • An item
  • A second item
  • A third item
  • An item
  • A second item
  • A third item

<ListGroup horizontal>
<ListGroupItem>An item</ListGroupItem>
<ListGroupItem>A second item</ListGroupItem>
<ListGroupItem>A third item</ListGroupItem>
</ListGroup>
<ListGroup horizontal="sm">
<ListGroupItem>An item</ListGroupItem>
<ListGroupItem>A second item</ListGroupItem>
<ListGroupItem>A third item</ListGroupItem>
</ListGroup>
<ListGroup horizontal="md">
<ListGroupItem>An item</ListGroupItem>
<ListGroupItem>A second item</ListGroupItem>
<ListGroupItem>A third item</ListGroupItem>
</ListGroup>
<ListGroup horizontal="lg">
<ListGroupItem>An item</ListGroupItem>
<ListGroupItem>A second item</ListGroupItem>
<ListGroupItem>A third item</ListGroupItem>
</ListGroup>
<ListGroup horizontal="xl">
<ListGroupItem>An item</ListGroupItem>
<ListGroupItem>A second item</ListGroupItem>
<ListGroupItem>A third item</ListGroupItem>
</ListGroup>
<ListGroup horizontal="xxl">
<ListGroupItem>An item</ListGroupItem>
<ListGroupItem>A second item</ListGroupItem>
<ListGroupItem>A third item</ListGroupItem>
</ListGroup>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

Contextual variants

For different contextual variant of list group items, set value for variant prop. Supported variant values are 'primary'|'secondary'|'success'|'danger'|'warning'|'info'|'light'|'dark'.

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

<ListGroup>
<ListGroupItem
    v-for="variant in [null,'primary','secondary','success','danger','warning','info','light','dark']"
    :variant="variant">
    A simple {{variant?variant:'default'}} group item
</ListGroupItem>
</ListGroup>
1
2
3
4
5
6
7
8

These variants also works with actionable items.


<ListGroup>
<ListGroupItem
    button
    v-for="variant in [null,'primary','secondary','success','danger','warning','info','light','dark']"
    :variant="variant">
    A simple {{variant?variant:'default'}} group item
</ListGroupItem>
</ListGroup>
1
2
3
4
5
6
7
8
9

With badges

Add badges to any list group item to show unread counts, activity, and more with the help of some utilitiesopen in new window.

  • A list item 14
  • A second list item 14
  • A third list item 14

<ListGroup>
<ListGroupItem class="d-flex justify-content-between align-items-center">
    A list item
    <Badge variant="primary" pill>14</Badge>
</ListGroupItem>
<ListGroupItem class="d-flex justify-content-between align-items-center">
    A second list item
    <Badge variant="primary" pill>14</Badge>
</ListGroupItem>
<ListGroupItem class="d-flex justify-content-between align-items-center">
    A third list item
    <Badge variant="primary" pill>14</Badge>
</ListGroupItem>
</ListGroup>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Custom content

Add nearly any HTML within, even for linked list groups like the one below, with the help of flexbox utilitiesopen in new window.

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.

<ListGroup tag="div">
<ListGroupItem href="#" active>
    <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>
</ListGroupItem>
<ListGroupItem href="#">
    <div class="d-flex w-100 justify-content-between">
        <h5 class="mb-1">List group item heading</h5>
        <small class="text-muted">3 days ago</small>
    </div>
    <p class="mb-1">Some placeholder content in a paragraph.</p>
    <small class="text-muted">And some muted small print.</small>
</ListGroupItem>
<ListGroupItem href="#">
    <div class="d-flex w-100 justify-content-between">
        <h5 class="mb-1">List group item heading</h5>
        <small class="text-muted">3 days ago</small>
    </div>
    <p class="mb-1">Some placeholder content in a paragraph.</p>
    <small class="text-muted">And some muted small print.</small>
</ListGroupItem>
</ListGroup>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

Checkboxes and radios

  • First checkbox
  • Second checkbox
  • Third checkbox
  • Fourth checkbox
  • Fifth checkbox 

<list-group>
<list-group-item>
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    First checkbox
</list-group-item>
<list-group-item>
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    Second checkbox
</list-group-item>
<list-group-item>
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    Third checkbox
</list-group-item>
<list-group-item>
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    Fourth checkbox
</list-group-item>
<list-group-item>
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    Fifth checkbox
</list-group-item>
</list-group>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

And if you want <label>s as the <ListGroupItem> for large hit areas, you can do that, too. Just set tag="label" for each list-group-item. Now click anywhere on any item, the checkbox will be toggled automatically.


<list-group tag="div">
    <list-group-item tag="label">
        <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
        First checkbox
    </list-group-item>
    <list-group-item tag="label">
        <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
        Second checkbox
    </list-group-item>
    <list-group-item tag="label">
        <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
        Third checkbox
    </list-group-item>
    <list-group-item tag="label">
        <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
        Fourth checkbox
    </list-group-item>
    <list-group-item tag="label">
        <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
        Fifth checkbox
    </list-group-item>
</list-group>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23