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

    Active items

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

    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.

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

    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.

    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.

    These work great with custom content as well.

    Horizontal

    Use the horizontal prop to make the ListGroup render horizontally. Currently horizontal list groups cannot be combined with flush list groups.

    There are responsive variants to horizontal: setting it to {sm|md|lg|xl|xxl} makes the list group horizontal starting at that breakpoint’s min-width.

    Contextual classes

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

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

    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.

    API

    ListGroup

    import ListGroup from 'react-bootstrap/ListGroup'
    NameTypeDefaultDescription
    as
    elementType

    You can use a custom element type for this component.

    horizontal
    true | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'

    Changes the flow of the list group items from vertical to horizontal. A value of null (the default) sets it to vertical for all breakpoints; Just including the prop sets it for all breakpoints, while {sm|md|lg|xl|xxl} makes the list group horizontal starting at that breakpoint’s min-width.

    numbered
    boolean

    Generate numbered list items.

    variant
    'flush'

    Adds a variant to the list-group

    bsPrefix
    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.Item

    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

    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 anchor or button element depending on whether a href is provided.

    disabled
    boolean

    Sets list item state as disabled.

    eventKey
    string | number

    A unique identifier for the Component, the eventKey makes it distinguishable from others in a set. Similar to React's key prop, in that it only needs to be unique amongst the Components siblings, not globally.

    href
    string

    Providing a href and setting action to true, it will render the ListGroup.Item as an <a> element (unless as is provided).

    onClick
    function

    A callback function for when this component is clicked.

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

    Sets contextual classes for list item.

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