Unlimited Access

Upgrade your plan from a Free trial, to select ‘Business Plan’. Start Now

Upgrade Now

Listgroup

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 list

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.

Design
Code
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros
<ListGroup>
    <ListGroup.Item>Cras justo odio</ListGroup.Item>
    <ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item>
    <ListGroup.Item>Morbi leo risus</ListGroup.Item>
    <ListGroup.Item>Porta ac consectetur ac</ListGroup.Item>
    <ListGroup.Item>Vestibulum at eros</ListGroup.Item>
</ListGroup>

Active Item

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

Design
Code
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros
<ListGroup>
    <ListGroup.Item active>Cras justo odio</ListGroup.Item>
    <ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item>
    <ListGroup.Item>Morbi leo risus</ListGroup.Item>
    <ListGroup.Item>Porta ac consectetur ac</ListGroup.Item>
    <ListGroup.Item>Vestibulum at eros</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.

Design
Code
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros
<ListGroup>
    <ListGroup.Item disabled>Cras justo odio</ListGroup.Item>
    <ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item>
    <ListGroup.Item>Morbi leo risus</ListGroup.Item>
    <ListGroup.Item>Porta ac consectetur ac</ListGroup.Item>
    <ListGroup.Item>Vestibulum at eros</ListGroup.Item>
</ListGroup>
Design
Code
<ListGroup defaultActiveKey="#link1">
    <ListGroup.Item action href="#link1" active >Cras justo odio</ListGroup.Item>
    <ListGroup.Item action href="#link2">Dapibus ac facilisis in</ListGroup.Item>
    <ListGroup.Item action href="#link3">Morbi leo risus</ListGroup.Item>
    <ListGroup.Item action href="#link4">Porta ac consectetur ac</ListGroup.Item>
    <ListGroup.Item action href="#link5" disabled>Vestibulum at eros</ListGroup.Item>
</ListGroup>

With onClick function parameter, list group will create <button>s, you can also make use of the disabled and active attributes.

Design
Code
<ListGroup defaultActiveKey="#link1">
    <ListGroup.Item action onClick={alertClicked} active >Cras justo odio</ListGroup.Item>
    <ListGroup.Item action onClick={alertClicked}>Dapibus ac facilisis in</ListGroup.Item>
    <ListGroup.Item action onClick={alertClicked}>Morbi leo risus</ListGroup.Item>
    <ListGroup.Item action onClick={alertClicked}>Porta ac consectetur ac</ListGroup.Item>
    <ListGroup.Item action onClick={alertClicked} disabled>Vestibulum at eros</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.

Design
Code
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros
<ListGroup variant="flush">
    <ListGroup.Item>Cras justo odio</ListGroup.Item>
    <ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item>
    <ListGroup.Item>Morbi leo risus</ListGroup.Item>
    <ListGroup.Item>Porta ac consectetur ac</ListGroup.Item>
    <ListGroup.Item>Vestibulum at eros</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.

Design
Code
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
<ListGroup horizontal>
    <ListGroup.Item>Cras justo odio</ListGroup.Item>
    <ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item>
    <ListGroup.Item>Morbi leo risus</ListGroup.Item>                                
</ListGroup>

ProTip: Want equal-width list group items when horizontal? Add .flex-fill to each list group item.

Design
Code
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
<ListGroup horizontal>
    <ListGroup.Item className="flex-fill">Cras justo odio</ListGroup.Item>
    <ListGroup.Item className="flex-fill">Dapibus ac facilisis in</ListGroup.Item>
    <ListGroup.Item className="flex-fill">Morbi leo risus</ListGroup.Item>                                
</ListGroup>

Contextual classes

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

Design
Code
Dapibus ac facilisis in
This is a Primary list group item
This is a Secondary list group item
This is a Success list group item
This is a Danger list group item
This is a Warning list group item
This is a Info list group item
This is a Light list group item
This is a Dark list group item
<ListGroup>
    <ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item>
    <ListGroup.Item variant="primary">This is a Primary list group item</ListGroup.Item>
    <ListGroup.Item variant="secondary">This is a Secondary list group item</ListGroup.Item>
    <ListGroup.Item variant="success">This is a Success list group item</ListGroup.Item>
    <ListGroup.Item variant="danger">This is a Danger list group item</ListGroup.Item>
    <ListGroup.Item variant="warning">This is a Warning list group item</ListGroup.Item>
    <ListGroup.Item variant="info">This is a Info list group item</ListGroup.Item>
    <ListGroup.Item variant="light">This is a Light list group item</ListGroup.Item>
    <ListGroup.Item variant="dark">This is a Dark list group item</ListGroup.Item>
</ListGroup>

With badges

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

Design
Code
Cras justo odio 14
Dapibus ac facilisis in 2
Morbi leo risus 1
<ListGroup>
    <ListGroup.Item className="d-flex justify-content-between" >Cras justo odio <Badge bg="primary">14</Badge> </ListGroup.Item>
    <ListGroup.Item className="d-flex justify-content-between" >Dapibus ac facilisis in <Badge bg="primary">2</Badge></ListGroup.Item>
    <ListGroup.Item className="d-flex justify-content-between" >Morbi leo risus <Badge bg="primary">1</Badge></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.

Design
Code
<ListGroup defaultActiveKey="#link1" >
    <ListGroup.Item action href="#link1" active> 
        <div className="d-flex w-100 justify-content-between">
            <h5 className="mb-1">List group item heading</h5>
            <small>3 days ago</small>
        </div>
        <p className="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
        <small>Donec id elit non mi porta.</small>
    </ListGroup.Item>
    <ListGroup.Item action href="#link2" > 
        <div className="d-flex w-100 justify-content-between">
            <h5 className="mb-1">List group item heading</h5>
            <small>3 days ago</small>
        </div>
        <p className="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
        <small>Donec id elit non mi porta.</small>
    </ListGroup.Item>
    <ListGroup.Item action href="#link3" > 
        <div className="d-flex w-100 justify-content-between">
            <h5 className="mb-1">List group item heading</h5>
            <small>3 days ago</small>
        </div>
        <p className="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
        <small>Donec id elit non mi porta.</small>
    </ListGroup.Item>                                
</ListGroup>

List Group with Icon

Design
Code
12 hours video
Certificate
12 Article
Watch Offline
Lifetime access
<ListGroup variant="flush">
    <ListGroup.Item>
        <PlayCircle size="15px" className="align-middle me-2 text-primary"/>
        12 hours video
    </ListGroup.Item>
    <ListGroup.Item>
        <Award size="15px" className="align-middle me-2 text-success"/>
        Certificate
    </ListGroup.Item>
    <ListGroup.Item>
        <Calendar size="15px" className="align-middle me-2 text-info"/>
        12 Article
    </ListGroup.Item>
    <ListGroup.Item>
        <Video size="15px" className="align-middle me-2 text-secondary"/>
        Watch Offline
    </ListGroup.Item>
    <ListGroup.Item>
        <Clock size="15px" className="align-middle me-2 text-warning"/>
        Lifetime access
    </ListGroup.Item>
</ListGroup>

List with Data

Design
Code
Post ID
8693637308
Status
Published (unsaved changes)
Created by
Geeks Courses
Admin
Created at
Jul 30, 2:21 PM
First published at
Jul 30, 2:21 PM
Last update
Aug 31, 12:21 PM
Last Published
Aug 31, 12:21 PM
// Below import is required to use DotBadge custom component
// import DotBadge from './DotBadge'; 


<ListGroup variant="flush">
    <ListGroup.Item>
        <span>Post ID</span>
        <h5>8693637308</h5>
    </ListGroup.Item>
    <ListGroup.Item>
        <span>Status</span>
        <h5><DotBadge bg="success" >Published (unsaved changes)</DotBadge></h5>
    </ListGroup.Item>
    <ListGroup.Item>
        <span>Created by</span>
        <div className="d-flex mt-2">
            <Image src={Avatar1} alt="" className="avatar-sm rounded-circle"/>
            <div className="ms-2">
                <h5 className="mb-n1">Geeks Courses</h5>
                <small>Admin</small>
            </div>
        </div>
    </ListGroup.Item>
    <ListGroup.Item>
        <span>Created at</span>
        <h5>Jul 30, 2:21 PM</h5>
    </ListGroup.Item>
    <ListGroup.Item>
        <span>First published at</span>
        <h5>Jul 30, 2:21 PM</h5>
    </ListGroup.Item>
    <ListGroup.Item>
        <span>Last update</span>
        <h5>Aug 31, 12:21 PM</h5>
    </ListGroup.Item>
    <ListGroup.Item>
        <span>Last Published</span>
        <h5>Aug 31, 12:21 PM</h5>
    </ListGroup.Item>
</ListGroup>