List group

Flexible component for displaying a series of content.

Basic example

A first item

An active item

A third item

A disabled item

And a fifth one

import ListGroup from 'react-bootstrap/ListGroup'
import ListGroupItem from 'react-bootstrap/ListGroupItem'

export default function ListGroupBasicDemo() {
  return (
    <ListGroup style={{ maxWidth: 300 }}>
      <ListGroupItem>A first item</ListGroupItem>
      <ListGroupItem active>An active item</ListGroupItem>
      <ListGroupItem>A third item</ListGroupItem>
      <ListGroupItem disabled>A disabled item</ListGroupItem>
      <ListGroupItem>And a fifth one</ListGroupItem>
    </ListGroup>
  )
}

Borderless

A first item

An active item

A third item

A disabled item

And a fifth one

import ListGroup from 'react-bootstrap/ListGroup'
import ListGroupItem from 'react-bootstrap/ListGroupItem'

export default function ListGroupBorderlessDemo() {
  return (
    <ListGroup variant="borderless" style={{ maxWidth: 300 }}>
      <ListGroupItem>A first item</ListGroupItem>
      <ListGroupItem active>An active item</ListGroupItem>
      <ListGroupItem>A third item</ListGroupItem>
      <ListGroupItem disabled>A disabled item</ListGroupItem>
      <ListGroupItem>And a fifth one</ListGroupItem>
    </ListGroup>
  )
}

Links or buttons

A first link item A second link item Next.js link item A disabled link item

'use client'

import Link from 'next/link'
import ListGroup from 'react-bootstrap/ListGroup'
import ListGroupItem from 'react-bootstrap/ListGroupItem'

export default function ListGroupLinksDemo() {
  return (
    <ListGroup defaultActiveKey="#link2" style={{ maxWidth: 300 }}>
      <ListGroupItem action href="#link1">
        A first link item
      </ListGroupItem>
      <ListGroupItem action href="#link2">
        A second link item
      </ListGroupItem>
      <ListGroupItem action as={Link} href="#link3">
        Next.js link item
      </ListGroupItem>
      <ListGroupItem action href="#link4" disabled>
        A disabled link item
      </ListGroupItem>
      <ListGroupItem action onClick={() => alert('You clicked the button ListGroupItem!')}>
        This one is a button
      </ListGroupItem>
    </ListGroup>
  )
}

Flush

A first item

A second item

A third item

A forth item

And a fifth one

import ListGroup from 'react-bootstrap/ListGroup'
import ListGroupItem from 'react-bootstrap/ListGroupItem'

export default function ListGroupFlushDemo() {
  return (
    <ListGroup variant="flush" style={{ maxWidth: 300 }}>
      <ListGroupItem>A first item</ListGroupItem>
      <ListGroupItem>A second item</ListGroupItem>
      <ListGroupItem>A third item</ListGroupItem>
      <ListGroupItem>A forth item</ListGroupItem>
      <ListGroupItem>And a fifth one</ListGroupItem>
    </ListGroup>
  )
}

With icons and badges

import ListGroup from 'react-bootstrap/ListGroup'
import ListGroupItem from 'react-bootstrap/ListGroupItem'

export default function ListGroupIconsBadgesDemo() {
  return (
    <ListGroup style={{ maxWidth: 300 }}>
      <ListGroupItem action className="d-flex align-items-center">
        <i className="ci-message-circle fs-base opacity-75 me-2"/>
        Messages
        <Badge bg="info" pill className="ms-auto">
          5
        </Badge>
      </ListGroupItem>
      <ListGroupItem action className="d-flex align-items-center">
        <i className="ci-shopping-bag fs-base opacity-75 me-2"/>
        Orders
        <Badge bg="warning" pill className="ms-auto">
          3
        </Badge>
      </ListGroupItem>
      <ListGroupItem action className="d-flex align-items-center">
        <i className="ci-bell fs-base opacity-75 me-2"/>
        Notifications
        <Badge bg="success" pill className="ms-auto">
          7
        </Badge>
      </ListGroupItem>
      <ListGroupItem action className="d-flex align-items-center">
        <i className="ci-heart fs-base opacity-75 me-2"/>
        Favorites
        <Badge bg="danger" pill className="ms-auto">
          2
        </Badge>
      </ListGroupItem>
    </ListGroup>
  )
}

Checkboxes and radios

import ListGroup from 'react-bootstrap/ListGroup'
import ListGroupItem from 'react-bootstrap/ListGroupItem'
import FormCheckInput from 'react-bootstrap/FormCheckInput'

export default function ListGroupCheckboxesDemo() {
  return (
    <>
      <ListGroup style={{ maxWidth: 300 }}>
        <ListGroupItem as="label">
          <FormCheckInput type="checkbox" value="first" className="me-2" defaultChecked />
          First checkbox
        </ListGroupItem>
        <ListGroupItem as="label">
          <FormCheckInput type="checkbox" value="second" className="me-2" />
          Second checkbox
        </ListGroupItem>
        <ListGroupItem as="label">
          <FormCheckInput type="checkbox" value="third" className="me-2" />
          Third checkbox
        </ListGroupItem>
        <ListGroupItem as="label">
          <FormCheckInput type="checkbox" value="fourth" className="me-2" />
          Fourth checkbox
        </ListGroupItem>
      </ListGroup>

      <ListGroup style={{ maxWidth: 300 }}>
        <ListGroupItem as="label">
          <FormCheckInput type="radio" name="lg-radio" value="first" className="me-2" defaultChecked />
          First radio
        </ListGroupItem>
        <ListGroupItem as="label">
          <FormCheckInput type="radio" name="lg-radio" value="second" className="me-2" />
          Second radio
        </ListGroupItem>
        <ListGroupItem as="label">
          <FormCheckInput type="radio" name="lg-radio" value="third" className="me-2" />
          Third radio
        </ListGroupItem>
        <ListGroupItem as="label">
          <FormCheckInput type="radio" name="lg-radio" value="fourth" className="me-2" />
          Fourth radio
        </ListGroupItem>
      </ListGroup>
    </>
  )
}

Numbered list group

A list item
A list item
A list item
A list item

import ListGroup from 'react-bootstrap/ListGroup'
import ListGroupItem from 'react-bootstrap/ListGroupItem'

export default function ListGroupNumberedDemo() {
  return (
    <ListGroup as="ol" numbered style={{ maxWidth: 300 }}>
      <ListGroupItem as="li">A list item</ListGroupItem>
      <ListGroupItem as="li">A list item</ListGroupItem>
      <ListGroupItem as="li">A list item</ListGroupItem>
      <ListGroupItem as="li">A list item</ListGroupItem>
    </ListGroup>
  )
}

Horizontal list group

A first item

A second item

A third item

A first item

A second item

A third item

A first link A second link A third link

import ListGroup from 'react-bootstrap/ListGroup'
import ListGroupItem from 'react-bootstrap/ListGroupItem'

export default function ListGroupHorizontalDemo() {
  return (
    <>
      <ListGroup horizontal className="mb-3">
        <ListGroupItem>A first item</ListGroupItem>
        <ListGroupItem>A second item</ListGroupItem>
        <ListGroupItem>A third item</ListGroupItem>
      </ListGroup>

      <ListGroup horizontal className="mb-3">
        <ListGroupItem className="flex-fill text-center">A first item</ListGroupItem>
        <ListGroupItem className="flex-fill text-center">A second item</ListGroupItem>
        <ListGroupItem className="flex-fill text-center">A third item</ListGroupItem>
      </ListGroup>

      <ListGroup horizontal defaultActiveKey="#link1" className="text-center mb-3">
        <ListGroupItem action href="#link1">
          A first link
        </ListGroupItem>
        <ListGroupItem action href="#link2">
          A second link
        </ListGroupItem>
        <ListGroupItem action href="#link3">
          A third link
        </ListGroupItem>
      </ListGroup>

      <ListGroup horizontal variant="borderless" defaultActiveKey="#link2" className="text-center">
        <ListGroupItem action href="#link1">
          A first link
        </ListGroupItem>
        <ListGroupItem action href="#link2">
          A second link
        </ListGroupItem>
        <ListGroupItem action href="#link3">
          A third link
        </ListGroupItem>
      </ListGroup>
    </>
  )
}

Custom content

List group item heading

3 days ago

Some placeholder content in a paragraph.

And some small print.

List group item heading

3 days ago

Some placeholder content in a paragraph.

And some small print.

List group item heading

3 days ago

Some placeholder content in a paragraph.

And some small print.

import ListGroup from 'react-bootstrap/ListGroup'
import ListGroupItem from 'react-bootstrap/ListGroupItem'

export default function ListGroupCustomContentlDemo() {
  return (
    <ListGroup defaultActiveKey="#link1" style={{ maxWidth: 400 }}>
      <ListGroupItem action href="#link1" className="p-3 fw-normal">
        <div className="d-flex w-100 justify-content-between">
          <h6 className="mb-1">List group item heading</h6>
          <small className="text-body-secondary">3 days ago</small>
        </div>
        <p className="mb-1">Some placeholder content in a paragraph.</p>
        <small className="text-body-tertiary">And some small print.</small>
      </ListGroupItem>
      <ListGroupItem action href="#link2" className="p-3 fw-normal">
        <div className="d-flex w-100 justify-content-between">
          <h6 className="mb-1">List group item heading</h6>
          <small className="text-body-secondary">3 days ago</small>
        </div>
        <p className="mb-1">Some placeholder content in a paragraph.</p>
        <small className="text-body-tertiary">And some small print.</small>
      </ListGroupItem>
      <ListGroupItem action href="#link3" className="p-3 fw-normal">
        <div className="d-flex w-100 justify-content-between">
          <h6 className="mb-1">List group item heading</h6>
          <small className="text-body-secondary">3 days ago</small>
        </div>
        <p className="mb-1">Some placeholder content in a paragraph.</p>
        <small className="text-body-tertiary">And some small print.</small>
      </ListGroupItem>
    </ListGroup>
  )
}

Color variations

A simple default list group item

A simple primary list group item

A simple secondary list group item

A simple success list group item

A simple danger list group item

A simple warning list group item

A simple info list group item

A simple light list group item

A simple dark list group item

import ListGroup from 'react-bootstrap/ListGroup'
import ListGroupItem from 'react-bootstrap/ListGroupItem'

export default function ListGroupColorsDemo() {
  return (
    <ListGroup style={{ maxWidth: 350 }}>
      <ListGroupItem>A simple default list group item</ListGroupItem>
      <ListGroupItem variant="primary">A simple primary list group item</ListGroupItem>
      <ListGroupItem variant="secondary">A simple secondary list group item</ListGroupItem>
      <ListGroupItem variant="success">A simple success list group item</ListGroupItem>
      <ListGroupItem variant="danger">A simple danger list group item</ListGroupItem>
      <ListGroupItem variant="warning">A simple warning list group item</ListGroupItem>
      <ListGroupItem variant="info">A simple info list group item</ListGroupItem>
      <ListGroupItem variant="light">A simple light list group item</ListGroupItem>
      <ListGroupItem variant="dark">A simple dark list group item</ListGroupItem>
    </ListGroup>
  )
}

Tabbed interface

Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing exercitation fugiat tempor. Voluptate deserunt sit sunt nisi aliqua fugiat proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad non minim tempor sunt voluptate consectetur exercitation id ut nulla. Ea et fugiat aliquip nostrud sunt incididunt consectetur culpa aliquip eiusmod dolor. Anim ad Lorem aliqua in cupidatat nisi enim voluptatum iure autem atque quaerat.

Cupidatat quis ad sint excepteur laborum in esse qui. Et excepteur consectetur ex nisi eu do cillum ad laborum. Mollit et eu officia dolore sunt Lorem culpa qui commodo velit ex amet id ex. Officia anim incididunt laboris deserunt anim aute dolor incididunt veniam aute dolore do exercitation. Dolor nisi culpa ex ad irure in elit eu dolore. Ad laboris ipsum reprehenderit irure non commodo enim culpa commodo itaque dolores dolorum similique architecto.

Ut ut do pariatur aliquip aliqua aliquip exercitation do nostrud commodo reprehenderit aute ipsum voluptate. Irure Lorem et laboris nostrud amet cupidatat cupidatat anim do ut velit mollit consequat enim tempor. Consectetur est minim nostrud nostrud consectetur irure labore voluptate irure. Ipsum id Lorem sit sint voluptate est pariatur eu ad cupidatat et deserunt culpa sit eiusmod deserunt. Consectetur et fugiat anim do eiusmod aliquip.

Irure enim occaecat labore sit qui aliquip reprehenderit amet velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna sit occaecat laboris sunt dolor. Nisi eu minim cillum occaecat aute est cupidatat aliqua labore aute occaecat ea aliquip sunt amet. Aute mollit dolor ut exercitation irure commodo non amet consectetur quis amet culpa. Quis ullamco nisi amet qui aute irure eu. Magna labore dolor quis ex labore id nostrud deserunt dolor eiusmod.

'use client'

import Row from 'react-bootstrap/Row'
import Col from 'react-bootstrap/Col'
import ListGroup from 'react-bootstrap/ListGroup'
import ListGroupItem from 'react-bootstrap/ListGroupItem'
import TabContainer from 'react-bootstrap/TabContainer'
import TabContent from 'react-bootstrap/TabContent'
import TabPane from 'react-bootstrap/TabPane'

export default function ListGroupTabsDemo() {
  return (
    <TabContainer defaultActiveKey="home">
      <Row>
        <Col md={4}>
          <ListGroup>
            <ListGroupItem action eventKey="home">
              Home
            </ListGroupItem>
            <ListGroupItem action eventKey="profile">
              Profile
            </ListGroupItem>
            <ListGroupItem action eventKey="messages">
              Messages
            </ListGroupItem>
            <ListGroupItem action eventKey="settings">
              Settings
            </ListGroupItem>
          </ListGroup>
        </Col>
        <Col md={8} className="pt-4 pt-md-0">
          <TabContent>
            <TabPane eventKey="home">
              Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing exercitation fugiat
              tempor. Voluptate deserunt sit sunt nisi aliqua fugiat proident ea ut. Mollit voluptate reprehenderit
              occaecat nisi ad non minim tempor sunt voluptate consectetur exercitation id ut nulla. Ea et fugiat
              aliquip nostrud sunt incididunt consectetur culpa aliquip eiusmod dolor. Anim ad Lorem aliqua in
              cupidatat nisi enim voluptatum iure autem atque quaerat.
            </TabPane>
            <TabPane eventKey="profile">
              Cupidatat quis ad sint excepteur laborum in esse qui. Et excepteur consectetur ex nisi eu do cillum ad
              laborum. Mollit et eu officia dolore sunt Lorem culpa qui commodo velit ex amet id ex. Officia anim
              incididunt laboris deserunt anim aute dolor incididunt veniam aute dolore do exercitation. Dolor nisi
              culpa ex ad irure in elit eu dolore. Ad laboris ipsum reprehenderit irure non commodo enim culpa
              commodo itaque dolores dolorum similique architecto.
            </TabPane>
            <TabPane eventKey="messages">
              Ut ut do pariatur aliquip aliqua aliquip exercitation do nostrud commodo reprehenderit aute ipsum
              voluptate. Irure Lorem et laboris nostrud amet cupidatat cupidatat anim do ut velit mollit consequat
              enim tempor. Consectetur est minim nostrud nostrud consectetur irure labore voluptate irure. Ipsum id
              Lorem sit sint voluptate est pariatur eu ad cupidatat et deserunt culpa sit eiusmod deserunt.
              Consectetur et fugiat anim do eiusmod aliquip.
            </TabPane>
            <TabPane eventKey="settings">
              Irure enim occaecat labore sit qui aliquip reprehenderit amet velit. Deserunt ullamco ex elit nostrud
              ut dolore nisi officia magna sit occaecat laboris sunt dolor. Nisi eu minim cillum occaecat aute est
              cupidatat aliqua labore aute occaecat ea aliquip sunt amet. Aute mollit dolor ut exercitation irure
              commodo non amet consectetur quis amet culpa. Quis ullamco nisi amet qui aute irure eu. Magna labore
              dolor quis ex labore id nostrud deserunt dolor eiusmod.
            </TabPane>
          </TabContent>
        </Col>
      </Row>
    </TabContainer>
  )
}