React Bootstrap List Group

React List Group - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

React Bootstrap list group is a flexible component which displays not only simple list of elements but complex custom content.

Basic example

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

Show code

        
            
        import React from 'react';
        import { MDBListGroup, MDBListGroupItem, MDBContainer } from "mdbreact";

        const ListGroupPage = () => {
          return (
            <MDBContainer>
              <MDBListGroup style={{ width: "22rem" }}>
                <MDBListGroupItem>Cras justo odio</MDBListGroupItem>
                <MDBListGroupItem>Dapibus ac facilisis in</MDBListGroupItem>
                <MDBListGroupItem>Morbi leo risus</MDBListGroupItem>
                <MDBListGroupItem>Porta ac consectetur ac</MDBListGroupItem>
                <MDBListGroupItem>Vestibulum at eros</MDBListGroupItem>
              </MDBListGroup>
            </MDBContainer>
          );
        };

        export default ListGroupPage;

Labels

Add labels to any list group item to show unread counts, activity, etc.

Cras justo odio 14
Dapibus ac facilisis in 2
Morbi leo risus 1

Show code

        
            
        import React from 'react';
        import { MDBListGroup, MDBListGroupItem, MDBContainer, MDBBadge } from "mdbreact";

        const ListGroupPage = () => {
          return (
            <MDBContainer>
              <MDBListGroup style={{ width: "22rem" }}>
                <MDBListGroupItem className="d-flex justify-content-between align-items-center">Cras justo odio<MDBBadge color="primary"
                    pill>14</MDBBadge>
                </MDBListGroupItem>
                <MDBListGroupItem className="d-flex justify-content-between align-items-center">Dapibus ac facilisis in<MDBBadge
                    color="primary" pill>2</MDBBadge>
                </MDBListGroupItem>
                <MDBListGroupItem className="d-flex justify-content-between align-items-center">Morbi leo risus<MDBBadge color="primary"
                    pill>1</MDBBadge>
                </MDBListGroupItem>
              </MDBListGroup>
            </MDBContainer>
          );
        };

        export default ListGroupPage;

Linked items

Linkify list group items using the href prop and an optional active prop.

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

Show code

        
            
        import React from 'react';
        import { MDBListGroup, MDBListGroupItem, MDBContainer } from "mdbreact";

        const MyListGroup = () => {
          return (
            <MDBContainer>
              <MDBListGroup style={{ width: "22rem" }}>
                <MDBListGroupItem href="#" active>Cras justo odio</MDBListGroupItem>
                <MDBListGroupItem href="#">Dapibus ac facilisis in</MDBListGroupItem>
                <MDBListGroupItem href="#">Morbi leo risus</MDBListGroupItem>
                <MDBListGroupItem href="#">Porta ac consectetur ac</MDBListGroupItem>
                <MDBListGroupItem href="#">Vestibulum at eros</MDBListGroupItem>
              </MDBListGroup>
            </MDBContainer>
          );
        };

        export default MyListGroup;

Links and buttons

To create actionable list group items with hover or disabled states use appropriate attributes, namely hover and disabled .

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

Show code

        
            
        import React from 'react';
        import { MDBListGroup, MDBListGroupItem, MDBContainer } from "mdbreact";

        const MyListGroup = () => {
          return (
            <MDBContainer>
              <MDBListGroup style={{ width: "22rem" }}>
                <MDBListGroupItem href="#" active>Cras justo odio</MDBListGroupItem>
                <MDBListGroupItem href="#" hover>Dapibus ac facilisis in</MDBListGroupItem>
                <MDBListGroupItem href="#" hover>Morbi leo risus</MDBListGroupItem>
                <MDBListGroupItem href="#" hover>Porta ac consectetur ac</MDBListGroupItem>
                <MDBListGroupItem href="#" disabled>Vestibulum at eros</MDBListGroupItem>
              </MDBListGroup>
            </MDBContainer>
          );
        };

        export default MyListGroup;

Contextual classes

Use color prop to style list items.

Dapibus ac facilisis in
Cras sit amet nibh libero
Porta ac consectetur ac
Vestibulum at eros
Dapibus ac facilisis in
Cras sit amet nibh libero
Porta ac consectetur ac
Vestibulum at eros

Show code

        
            
          import React from 'react';
          import { MDBListGroup, MDBListGroupItem, MDBContainer } from "mdbreact";

          const ListGroupPage = () => {
            return (
              <MDBContainer>
                <MDBListGroup className="my-4 mx-4" style={{ width: "22rem" }}>
                  <MDBListGroupItem color="primary">Cras justo odio</MDBListGroupItem>
                  <MDBListGroupItem color="secondary">Dapibus ac facilisis in</MDBListGroupItem>
                  <MDBListGroupItem color="danger">Morbi leo risus</MDBListGroupItem>
                  <MDBListGroupItem color="warning">Porta ac consectetur ac</MDBListGroupItem>
                  <MDBListGroupItem color="info">Vestibulum at eros</MDBListGroupItem>
                  <MDBListGroupItem color="light">Vestibulum at eros</MDBListGroupItem>
                  <MDBListGroupItem color="dark">Vestibulum at eros</MDBListGroupItem>
                </MDBListGroup>
              </MDBContainer>
            );
          };

          export default ListGroupPage;

Custom content

Add nearly any HTML within, even for linked list groups like the one below.

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.

Show code

        
            
          import React from 'react';
          import { MDBListGroup, MDBListGroupItem, MDBContainer } from "mdbreact";

          const ListGroupPage = () => {
            return (
              <MDBContainer>
                <MDBListGroup style={{ width: "22rem" }}>
                  <MDBListGroupItem active href="#">
                    <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>
                  </MDBListGroupItem>
                  <MDBListGroupItem hover href="#">
                    <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">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius
                      blandit.</p>
                    <small className="text-muted">Donec id elit non mi porta.</small>
                  </MDBListGroupItem>
                  <MDBListGroupItem hover href="#">
                    <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">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius
                      blandit.</p>
                    <small className="text-muted">Donec id elit non mi porta.</small>
                  </MDBListGroupItem>
                </MDBListGroup>
              </MDBContainer>
            );
          };

          export default ListGroupPage;

React List Group - API

In this section you will find advanced information about the List Group component. You will learn which modules are required in this component, what are the possibilities of configuring the component, and what events and methods you can use in working with it.

Import statement

Show code

javascript

        
            
          import { MDBListGroup, MDBListGroupItem } from "mdbreact";

API Reference: ListGroup Properties

The table below shows the configuration options of the MDBListGroup component.

Name	Type	Default	Description	Example
`className`	String		Adds custom classes	`<MDBListGroup className="customClass" />`
`tag`	String	`ul`	Changes list tag	`<MDBListGroup tag="ol" />`

API Reference: ListGroupItem Properties

The table below shows the configuration options of the MDBListGroupItem component.

Name	Type	Default	Description	Example
`active`	Boolean	`false`	Adds default active state to item	`<MDBListGroupItem active />`
`className`	String		Adds custom classes	`<MDBListGroupItem className="customClass" />`
`color`	String	`white`	Changes Item background and text color, accepts `["primary", "default", "secondary", "success", "dark", "danger", "info", "warning", "ins" ]`	`<MDBListGroupItem color="primary" />`
`danger`	Boolean	`false`	Renders item with danger state styles (red background)	`<MDBListGroupItem danger />`
`disabled`	Boolean	`false`	Disables item from being clicked	`<MDBListGroupItem disabled />`
`hover`	Boolean	`false`	Adds hover effect (slightly background color change)	`<MDBListGroupItem hover />`
`href`	String		Changes item tag to `<a>` with provided url	`<MDBListGroupItem href="https://yourUrl.com" />`
`info`	Boolean	`false`	Renders item with info state styles (blue background)	`<MDBListGroupItem info />`
`success`	Boolean	`false`	Renders item with success state styles (green background)	`<MDBListGroupItem success />`
`warning`	Boolean	`false`	Renders item with warning state styles (yellow background)	`<MDBListGroupItem warning />`
`tag`	String	`li`	Changes list item tag	`<MDBListGroupItem tag="li" />`