List group

List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.

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.

An item
A second item
A third item
A fourth item
And a fifth item
<ListGroup>
    <ListGroup.Item>An item</ListGroup.Item>
    <ListGroup.Item>A second item</ListGroup.Item>
    <ListGroup.Item>A third item</ListGroup.Item>
    <ListGroup.Item>A fourth item</ListGroup.Item>
    <ListGroup.Item>And a fifth item</ListGroup.Item>
</ListGroup>

Active items

Set the active prop to indicate the list groups current active selection.

  • An active item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one
<ListGroup as="ul">
    <ListGroup.Item as="li" active>
        An active item
    </ListGroup.Item>
    <ListGroup.Item as="li">A second item</ListGroup.Item>
    <ListGroup.Item as="li">A third item</ListGroup.Item>
    <ListGroup.Item as="li">A fourth item</ListGroup.Item>
    <ListGroup.Item as="li">And a fifth one</ListGroup.Item>
</ListGroup> 

Disabled items

Set the disabled prop to prevent actions on a <ListGroup.Item>. For elements that aren't naturally disable-able (like anchors) onClick handlers are added that call preventDefault to mimick disabled behavior.

A disabled item
A second item
A third item
A fourth item
And a fifth item
<ListGroup>
    <ListGroup.Item disabled>A disabled item</ListGroup.Item>
    <ListGroup.Item>A second item</ListGroup.Item>
    <ListGroup.Item>A third item</ListGroup.Item>
    <ListGroup.Item>A fourth item</ListGroup.Item>
    <ListGroup.Item>And a fifth item</ListGroup.Item>
</ListGroup>    

Links and buttons

Toggle the action prop to create actionable list group items, with disabled, hover and active styles. List item actions will render a <button> or <a> (depending on the presence of an href ) by default but can be overridden by setting the as prop as usual.

<ListGroup defaultActiveKey="#link1">
    <ListGroup.Item action href="#link1">
    The current link item
    </ListGroup.Item>
    <ListGroup.Item action href="#link2">
    A second link item
    </ListGroup.Item>
    <ListGroup.Item action href="#link3">
    A third link item
    </ListGroup.Item>
    <ListGroup.Item action href="#link4">
    A fourth link item
    </ListGroup.Item>
    <ListGroup.Item action disabled>
    A disabled link item
    </ListGroup.Item>
</ListGroup>

With <button>s, you can also make use of the disabled attribute instead of the .disabled class. Sadly, <a>s don’t support the disabled attribute.

<ListGroup defaultActiveKey="#link1">
    <ListGroup.Item action href="#link1">
    The current button item
    </ListGroup.Item>
    <ListGroup.Item action href="#link2">
    A second button item
    </ListGroup.Item>
    <ListGroup.Item action href="#link3">
    A third button item
    </ListGroup.Item>
    <ListGroup.Item action href="#link4">
    A fourth button item
    </ListGroup.Item>
    <ListGroup.Item action disabled>
    A disabled button item
    </ListGroup.Item>
</ListGroup>

Flush

Add the flush variant to remove outer borders and rounded corners to render list group items edge-to-edge in a parent container such as a Card.

An item
A second item
A third item
A fourth item
And a fifth item
<ListGroup variant="flush">
    <ListGroup.Item>An item</ListGroup.Item>
    <ListGroup.Item>A second item</ListGroup.Item>
    <ListGroup.Item>A third item</ListGroup.Item>
    <ListGroup.Item>A fourth item</ListGroup.Item>
    <ListGroup.Item>And a fifth item</ListGroup.Item>
</ListGroup>

Numbered

  1. Cras justo odio
  2. Cras justo odio
  3. Cras justo odio
<ListGroup as="ol" className="list-group-numbered">
    <ListGroup.Item as="li">Cras justo odio</ListGroup.Item>
    <ListGroup.Item as="li">Cras justo odio</ListGroup.Item>
    <ListGroup.Item as="li">Cras justo odio</ListGroup.Item>
</ListGroup>  

These work great with custom content as well.

  1. Subheading
    Cras justo odio
    14
  2. Subheading
    Cras justo odio
    14
  3. Subheading
    Cras justo odio
    14
<ListGroup as="ol" className="list-group-numbered">
    <ListGroup.Item as="li" className="d-flex justify-content-between align-items-start">
        <div className="ms-2 me-auto">
            <div className="fw-bold">Subheading</div>
            Cras justo odio
        </div>
        <Badge variant="bg-primary" className="bg-primary rounded-pill">14</Badge>
    </ListGroup.Item>
    <ListGroup.Item as="li" className="d-flex justify-content-between align-items-start">
        <div className="ms-2 me-auto">
            <div className="fw-bold">Subheading</div>
            Cras justo odio
        </div>
        <Badge className="bg-primary  rounded-pill">14</Badge>
    </ListGroup.Item>
    <ListGroup.Item as="li" className="d-flex justify-content-between align-items-start">
        <div className="ms-2 me-auto">
            <div className="fw-bold">Subheading</div>
            Cras justo odio
        </div>
        <Badge className="bg-primary rounded-pill">14</Badge>
    </ListGroup.Item>
</ListGroup>                  

Horizontal

Use the horizontal prop to make the ListGroup render horizontally. 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
{ ['sm', 'md', 'lg', 'xl', 'xxl'].map((breakpoint, idx) => (
    <ListGroup horizontal={breakpoint} className="my-2" key={idx}>
        <ListGroup.Item>An item</ListGroup.Item>
        <ListGroup.Item>A second item</ListGroup.Item>
        <ListGroup.Item>A third item</ListGroup.Item>
    </ListGroup>
))

Contextual classes

Use contextual variants on <ListGroup.Item>s to style them with a stateful background and color.

A simple default list group item
A simple default list group item
A simple default list group item
A simple default list group item
A simple default list group item
A simple default list group item
A simple default list group item
A simple default list group item
A simple default list group item
<ListGroup>
    <ListGroup.Item>A simple default list group item</ListGroup.Item>
    <ListGroup.Item variant="primary">A simple default list group item</ListGroup.Item>
    <ListGroup.Item variant="secondary">A simple default list group item</ListGroup.Item>
    <ListGroup.Item variant="success">A simple default list group item</ListGroup.Item>
    <ListGroup.Item variant="danger">A simple default list group item</ListGroup.Item>
    <ListGroup.Item variant="warning">A simple default list group item</ListGroup.Item>
    <ListGroup.Item variant="info">A simple default list group item</ListGroup.Item>
    <ListGroup.Item variant="light">A simple default list group item</ListGroup.Item>
    <ListGroup.Item variant="dark">A simple default list group item</ListGroup.Item>
</ListGroup>

When paired with actions, additional hover and active styles apply.

No style
Primary
<ListGroup>
    <ListGroup.Item>No style</ListGroup.Item>
    <ListGroup.Item variant="primary">Primary</ListGroup.Item>
    <ListGroup.Item action variant="secondary">
    Secondary
    </ListGroup.Item>
    <ListGroup.Item action variant="success">
    Success
    </ListGroup.Item>
    <ListGroup.Item action variant="danger">
    Danger
    </ListGroup.Item>
    <ListGroup.Item action variant="warning">
    Warning
    </ListGroup.Item>
    <ListGroup.Item action variant="info">
    Info
    </ListGroup.Item>
    <ListGroup.Item action variant="light">
    Light
    </ListGroup.Item>
    <ListGroup.Item action variant="dark">
    Dark
    </ListGroup.Item>
</ListGroup>

With badges

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

A list item14
A second list item2
A third list item1
<ListGroup>
    <ListGroup.Item className="d-flex justify-content-between align-items-center">
        A list item
        <span className="badge bg-primary rounded-pill">14</span>
    </ListGroup.Item>
    <ListGroup.Item className="d-flex justify-content-between align-items-center">
        A second list item
        <span className="badge bg-primary rounded-pill">2</span>
    </ListGroup.Item>
    <ListGroup.Item className="d-flex justify-content-between align-items-center">
        A third list item
        <span className="badge bg-primary rounded-pill">1</span>
    </ListGroup.Item>
</ListGroup>

Custom content

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

<div className="list-group">
    <Link to="#" className="list-group-item list-group-item-action active">
        <div className="d-flex w-100 justify-content-between">
            <h5 className="mb-1 text-dark">List group item heading</h5>
            <small>3 days ago</small>
        </div>
        <p className="mb-1">Some placeholder in the paragraph.</p>
        <small>And some small print.</small>
    </Link>
    <Link to="#" className="list-group-item list-group-item-action">
        <div className="d-flex w-100 justify-content-between">
            <h5 className="mb-1">List group item heading</h5>
            <small className="text-muted">3 days ago</small>
        </div>
        <p className="mb-1">Some placeholder in the paragraph.</p>
        <small className="text-muted">And some muted small print.</small>
    </Link>
    <Link to="#" className="list-group-item list-group-item-action">
        <div className="d-flex w-100 justify-content-between">
            <h5 className="mb-1">List group item heading</h5>
            <small className="text-muted">3 days ago</small>
        </div>
        <p className="mb-1">Some placeholder in the paragraph.</p>
        <small className="text-muted">And some muted small print.</small>
    </Link>
</div>

Checkboxes and radios

Place Bootstrap’s checkboxes and radios within list group items and customize as needed. You can use them without <label>s, but please remember to include an aria-label attribute and value for accessibility.

<ListGroup>
    <ListGroup.Item>
        <Form.Check type="checkbox" label="First Checkbox" />
    </ListGroup.Item>
    <ListGroup.Item>
        <Form.Check type="checkbox" label="Second Checkbox" />
    </ListGroup.Item>
    <ListGroup.Item>
        <Form.Check type="checkbox" label="Second Checkbox" />
    </ListGroup.Item>
    <ListGroup.Item>
        <Form.Check type="checkbox" label="Fourth Checkbox" />
    </ListGroup.Item>
    <ListGroup.Item>
        <Form.Check type="checkbox" label="Fifth Checkbox" />
    </ListGroup.Item>
</ListGroup>

And if you want <label>s as the .list-group-item for large hit areas, you can do that, too.

<ListGroup>
    <ListGroup.Item>
        <Form.Label><Form.Check type="checkbox" label="First Checkbox" /></Form.Label>
    </ListGroup.Item>
    <ListGroup.Item>
        <Form.Label><Form.Check type="checkbox" label="Second Checkbox" /></Form.Label>
    </ListGroup.Item>
    <ListGroup.Item>
        <Form.Label><Form.Check type="checkbox" label="Third Checkbox" /></Form.Label>
    </ListGroup.Item>
    <ListGroup.Item>
        <Form.Label><Form.Check type="checkbox" label="Fourth Checkbox" /></Form.Label>
    </ListGroup.Item>
    <ListGroup.Item>
        <Form.Label><Form.Check type="checkbox" label="Fifth Checkbox" /></Form.Label>
    </ListGroup.Item>
</ListGroup>