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>

Links and buttons

Use href and action props to create actionable list group items with hover, disabled, and active states.

Design

Code

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

<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>

Numbered

Add the numbered prop 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.

Design

Code

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus

<ListGroup as="ol" numbered>
    <ListGroup.Item as="li">Cras justo odio</ListGroup.Item>
    <ListGroup.Item as="li">Dapibus ac facilisis in</ListGroup.Item>
    <ListGroup.Item as="li">Morbi leo risus</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

List group item heading

3 days ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.

List group item heading

3 days ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.

List group item heading

3 days ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.

<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>