# List group ListGroup, ListGroupItem

List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.

# Centers by default


          const listgroupInstance = (
            <ListGroup>
              <ListGroupItem>Item 1</ListGroupItem>
              <ListGroupItem>Item 2</ListGroupItem>
              <ListGroupItem>...</ListGroupItem>
            </ListGroup>
          );

          
        

# Linked


          function alertClicked() {
            alert('You clicked the third ListGroupItem');
          }

          const listgroupInstance = (
            <ListGroup>
              <ListGroupItem href="#link1">Link 1</ListGroupItem>
              <ListGroupItem href="#link2">Link 2</ListGroupItem>
              <ListGroupItem onClick={alertClicked}>
                Trigger an alert
              </ListGroupItem>
            </ListGroup>
          );

          
        

# Styling by state

Set the active or disabled prop to true to mark or disable the item.


          const listgroupInstance = (
            <ListGroup>
              <ListGroupItem href="#" active>Link 1</ListGroupItem>
              <ListGroupItem href="#">Link 2</ListGroupItem>
              <ListGroupItem href="#" disabled>Link 3</ListGroupItem>
            </ListGroup>
          );

          
        

# Styling by color

Set the bsStyle prop to style the item


          const listgroupInstance = (
            <ListGroup>
              <ListGroupItem bsStyle="success">Success</ListGroupItem>
              <ListGroupItem bsStyle="info">Info</ListGroupItem>
              <ListGroupItem bsStyle="warning">Warning</ListGroupItem>
              <ListGroupItem bsStyle="danger">Danger</ListGroupItem>
            </ListGroup>
          );

          
        

# With header

Set the header prop to create a structured item, with a heading and a body area.


          const listgroupInstance = (
            <ListGroup>
              <ListGroupItem header="Heading 1">Some body text</ListGroupItem>
              <ListGroupItem header="Heading 2" href="#">Linked item</ListGroupItem>
              <ListGroupItem header="Heading 3" bsStyle="danger">Danger styling</ListGroupItem>
            </ListGroup>
          );

          
        

# With custom component children

When using ListGroupItems directly, ListGroup looks at whether the items have href or onClick props to determine which DOM elements to emit. However, with custom item components as children to ListGroup, set the componentClass prop to specify which element ListGroup should output.


          class CustomComponent extends React.Component {
            render() {
              return (
                <li
                  className="list-group-item"
                  onClick={() => {}}>
                  {this.props.children}
                </li>
              );
            }
          }

          const listgroupInstance = (
            <ListGroup componentClass="ul">
              <CustomComponent>Custom Child 1 </CustomComponent>
              <CustomComponent>Custom Child 2 </CustomComponent>
              <CustomComponent>Custom Child 3</CustomComponent>
            </ListGroup>
          );

          
        

# Props

ListGroup

NameTypeDefaultDescription
classNamestring
componentClassone of: "ul", "div"'div'The element for ListGroup if children are user-defined custom components.
idstring | number

ListGroupItem

NameTypeDefaultDescription
activeany
bsClassstring'list-group-item'Base CSS class and prefix for the component. Generally one should only change bsClass to provide new, non-Bootstrap, CSS styles for a component.
bsStyleone of: "success", "warning", "danger", "info"Component visual or contextual style variants.
classNamestring
disabledany
eventKeyany
headernode
hrefstring
listItemboolean
onClickfunction
targetstring