Rate this docs

React Bootstrap List Group

React List Group - Bootstrap 4 & Material Design

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

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

        const ListGroupPage = props => {
        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

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

        const ListGroupPage = props => {
        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.


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

        const MyListGroup = (props) => {
        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 .

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

        const MyListGroup = props => {
        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

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

        const ListGroupPage = props => {
        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.


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

        const ListGroupPage = props => {
        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;

      

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


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