Documentation
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.
<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.
<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
.
<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
- Cras justo odio
- Cras justo odio
- 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.
- 14SubheadingCras justo odio
- 14SubheadingCras justo odio
- 14SubheadingCras justo odio
<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.
{ ['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.
<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.
<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.
<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>