List groups

    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 Example

    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>;
    Press esc to disable tab trapping

    Active items

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

    • Cras justo odio
    • Dapibus ac facilisis in
    • Morbi leo risus
    • Porta ac consectetur ac
    <ListGroup as="ul">
  <ListGroup.Item as="li" active>
    Cras justo odio
  </ListGroup.Item>
  <ListGroup.Item as="li">Dapibus ac facilisis in</ListGroup.Item>
  <ListGroup.Item as="li" disabled>
    Morbi leo risus
  </ListGroup.Item>
  <ListGroup.Item as="li">Porta ac consectetur ac</ListGroup.Item>
</ListGroup>;
    Press esc to disable tab trapping

    Disabled items

    Set the disabled prop to prevent actions on a <List.Item>. For elements that aren't naturally disable-able (like anchors) onClick handlers are added that call preventDefault to mimick disabled behavior.

    Cras justo odio
    Dapibus ac facilisis in
    Morbi leo risus
    Porta ac consectetur ac
    <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>;
    Press esc to disable tab trapping

    Actionable items

    Toggle the action prop to create actionable list group items, with disabled, hover and active styles. List item actions will render a <button> or <a> (depending on the presence of an href) by default but can be overriden by setting the as prop as usual.

    List items actions are distinct from plain items to ensure that click or tap affordances aren't applied to non-interactive items.

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

render(
  <ListGroup defaultActiveKey="#link1">
    <ListGroup.Item action href="#link1">
      Link 1
    </ListGroup.Item>
    <ListGroup.Item action href="#link2" disabled>
      Link 2
    </ListGroup.Item>
    <ListGroup.Item action>This one is a button</ListGroup.Item>
  </ListGroup>,
);
    Press esc to disable tab trapping

    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.

    Cras justo odio
    Dapibus ac facilisis in
    Morbi leo risus
    Porta ac consectetur ac
    <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>;
    Press esc to disable tab trapping

    Contextual classes

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

    No style
    Primary
    Secondary
    Success
    Danger
    Warning
    Info
    Light
    Dark
    <ListGroup>
  <ListGroup.Item>No style</ListGroup.Item>
  <ListGroup.Item variant="primary">Primary</ListGroup.Item>
  <ListGroup.Item variant="secondary">Secondary</ListGroup.Item>
  <ListGroup.Item variant="success">Success</ListGroup.Item>
  <ListGroup.Item variant="danger">Danger</ListGroup.Item>
  <ListGroup.Item variant="warning">Warning</ListGroup.Item>
  <ListGroup.Item variant="info">Info</ListGroup.Item>
  <ListGroup.Item variant="light">Light</ListGroup.Item>
  <ListGroup.Item variant="dark">Dark</ListGroup.Item>
</ListGroup>;
    Press esc to disable tab trapping

    When paired with actions, additional hover and active styles apply.

    No style
    Primary
    <ListGroup>
  <ListGroup.Item>No style</ListGroup.Item>
  <ListGroup.Item variant="primary">Primary</ListGroup.Item>
  <ListGroup.Item action variant="secondary">
    Secondary
  </ListGroup.Item>
  <ListGroup.Item action variant="success">
    Success
  </ListGroup.Item>
  <ListGroup.Item action variant="danger">
    Danger
  </ListGroup.Item>
  <ListGroup.Item action variant="warning">
    Warning
  </ListGroup.Item>
  <ListGroup.Item action variant="info">
    Info
  </ListGroup.Item>
  <ListGroup.Item action variant="light">
    Light
  </ListGroup.Item>
  <ListGroup.Item action variant="dark">
    Dark
  </ListGroup.Item>
</ListGroup>;
    Press esc to disable tab trapping

    Tabbed Interfaces

    You can also use the Tab components to create ARIA compliant tabbable interfaces with the <ListGroup> component. Swap out the <Nav> component for the list group and you are good to go.

    Link 1Link 2

    <Tab.Container id="list-group-tabs-example" defaultActiveKey="#link1">
  <Row>
    <Col sm={4}>
      <ListGroup>
        <ListGroup.Item action href="#link1">
          Link 1
        </ListGroup.Item>
        <ListGroup.Item action href="#link2">
          Link 2
        </ListGroup.Item>
      </ListGroup>
    </Col>
    <Col sm={8}>
      <Tab.Content>
        <Tab.Pane eventKey="#link1">
          <Sonnet />
        </Tab.Pane>
        <Tab.Pane eventKey="#link2">
          <Sonnet />
        </Tab.Pane>
      </Tab.Content>
    </Col>
  </Row>
</Tab.Container>;
    Press esc to disable tab trapping

    API

    ListGroupview source file

    import ListGroup from 'react-bootstrap/ListGroup'
    NameTypeDefaultDescription
    as
    elementType
    		<div>

    You can use a custom element type for this component.

    variant
    'flush'
    		null

    Adds a variant to the list-group

    bsPrefix required
    string
    		'list-group'

    Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

    ListGroup.Itemview source file

    import ListGroup from 'react-bootstrap/ListGroup'
    NameTypeDefaultDescription
    action
    boolean

    Marks a ListGroupItem as actionable, applying additional hover, active and disabled styles for links and buttons.

    active
    boolean
    		false

    Sets list item as active

    as
    elementType
    		<{div | a | button}>

    You can use a custom element type for this component. For none action items, items render as li. For actions the default is an achor or button element depending on whether a href is provided.

    disabled
    boolean
    		false

    Sets list item state as disabled

    variant
    'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light'
    		null

    Sets contextual classes for list item

    bsPrefix required
    string
    		'list-group-item'

    Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.