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

    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

    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.

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

    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.

    Link 1Link 2

    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

    Horizontal

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

    This
    ListGroup
    renders
    horizontally!

    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.

    This ListGroup
    renders horizontally
    on sm
    and above!
    This ListGroup
    renders horizontally
    on md
    and above!
    This ListGroup
    renders horizontally
    on lg
    and above!
    This ListGroup
    renders horizontally
    on xl
    and above!
    This ListGroup
    renders horizontally
    on xxl
    and above!

    Contextual classes

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

    No style
    Primary
    Secondary
    Success
    Danger
    Warning
    Info
    Light
    Dark

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

    No style
    Primary

    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.

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

    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
    onClick
    function
    variant
    'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light'
    		undefined

    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.