Developed by Codescandy

List Group

The most basic list group is an unordered list with list items and the proper classes. Build upon it with the options that follow, or with your own CSS as needed.

Basic list

The most basic list group is an unordered list with list items and the proper classes. Build upon it with the options that follow, or with your own CSS as needed.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
<ListGroup as="ul">
    <ListGroup.Item as="li">Cras justo odio</ListGroup.Item>
    <ListGroup.Item as="li">Dapibus ac facilisis in</ListGroup.Item>
    <ListGroup.Item as="li">Morbi leo risus</ListGroup.Item>
    <ListGroup.Item as="li">Porta ac consectetur ac</ListGroup.Item>
    <ListGroup.Item as="li">Vestibulum at eros</ListGroup.Item>
</ListGroup>

Active Item

Add .active to a .list-group-item to indicate the current active selection.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
<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">Morbi leo risus</ListGroup.Item>
    <ListGroup.Item as="li">Porta ac consectetur ac</ListGroup.Item>
    <ListGroup.Item as="li">Vestibulum at eros</ListGroup.Item>
</ListGroup>

Disabled Items

Add .disabled to a .list-group-item to make it appeardisabled. Note that some elements with .disabled will also require custom JavaScript to fully disable their click events (e.g., links).

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
<ListGroup as="ul">
    <ListGroup.Item as="li" disabled>Cras justo odio</ListGroup.Item>
    <ListGroup.Item as="li">Dapibus ac facilisis in</ListGroup.Item>
    <ListGroup.Item as="li">Morbi leo risus</ListGroup.Item>
    <ListGroup.Item as="li">Porta ac consectetur ac</ListGroup.Item>
    <ListGroup.Item as="li">Vestibulum at eros</ListGroup.Item>
</ListGroup>
<ListGroup>
	<ListGroup.Item as={Link} href="" disabled action>
		Cras justo odio
	</ListGroup.Item>
	<ListGroup.Item as={Link} href="" action>
		Dapibus ac facilisis in
	</ListGroup.Item>
	<ListGroup.Item as={Link} href="" action>
		Morbi leo risus
	</ListGroup.Item>
	<ListGroup.Item as={Link} href="" action>
		Porta ac consectetur ac
	</ListGroup.Item>
	<ListGroup.Item as={Link} href="" action disabled>
		Vestibulum at eros
	</ListGroup.Item>
</ListGroup>

With <button> s, you can also make use of the disabled attribute instead of the .disabled class. Sadly, <a> s don’t support the disabled attribute.

<ListGroup>
	<ListGroup.Item action type="button" as={ "button"} active>
		Cras justo odio
	</ListGroup.Item>
	<ListGroup.Item action type="button" as={ "button"}>
		Dapibus ac facilisis in
	</ListGroup.Item>
	<ListGroup.Item action type="button" as={ "button"}>
		Morbi leo risus
	</ListGroup.Item>
	<ListGroup.Item action type="button" as={ "button"}>
		Porta ac consectetur ac
	</ListGroup.Item>
	<ListGroup.Item action type="button" as={ "button"} disabled>
		Vestibulum at eros
	</ListGroup.Item>
</ListGroup>

Flush

Add.list-group-flushto remove some borders and rounded corners to render list group items edge-to-edge in a parent container (e.g., cards).

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros
<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.Item>Vestibulum at eros</ListGroup.Item>
</ListGroup>

Numbered

Add the .list-group-numbered modifier class (and optionally use an <ol> element) 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.

Cras justo odio
Cras justo odio
Cras justo odio
<ListGroup numbered>
    <ListGroup.Item>Cras justo odio</ListGroup.Item>
    <ListGroup.Item>Cras justo odio</ListGroup.Item>
    <ListGroup.Item>Cras justo odio</ListGroup.Item>
</ListGroup>

These work great with custom content as well.

  1. Subheading
    Cras justo odio
    14
  2. Subheading
    Cras justo odio
    14
  3. Subheading
    Cras justo odio
    14
<ListGroup numbered as="ol">
	<ListGroup.Item as="li" className="d-flex justify-content-between align-items-start">
		<div className="ms-2 me-auto">
			<div className="fw-bold">
				Subheading
			</div>
			Cras justo odio
		</div>
		<Badge bg="primary" pill>
			14
		</Badge>
	</ListGroup.Item>
	<ListGroup.Item as="li" className="d-flex justify-content-between align-items-start">
		<div className="ms-2 me-auto">
			<div className="fw-bold">
				Subheading
			</div>
			Cras justo odio
		</div>
		<Badge bg="primary" pill>
			14
		</Badge>
	</ListGroup.Item>
	<ListGroup.Item as="li" className="d-flex justify-content-between align-items-start">
		<div className="ms-2 me-auto">
			<div className="fw-bold">
				Subheading
			</div>
			Cras justo odio
		</div>
		<Badge bg="primary" pill>
			14
		</Badge>
	</ListGroup.Item>
</ListGroup>

Horizontal

Add .list-group-horizontal to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive variant.list-group-horizontal- sm | md | lg | xlto make a list group horizontal starting at that breakpoint’s min-width . Currentlyhorizontal list groups cannot be combined with flush list groups.

ProTip:Want equal-width list group items when horizontal? Add .flex-fill to each list group item.

  • An item
  • A second item
  • A third item
  • An item
  • A second item
  • A third item
  • An item
  • A second item
  • A third item
  • An item
  • A second item
  • A third item
  • An item
  • A second item
  • A third item
  • An item
  • A second item
  • A third item
<ListGroup horizontal as="ul">
	<ListGroup.Item as="li">An item</ListGroup.Item>
	<ListGroup.Item as="li">A second item</ListGroup.Item>
	<ListGroup.Item as="li">A third item</ListGroup.Item>
</ListGroup>

<ListGroup horizontal={"sm"} as="ul">
	<ListGroup.Item as="li">An item</ListGroup.Item>
	<ListGroup.Item as="li">A second item</ListGroup.Item>
	<ListGroup.Item as="li">A third item</ListGroup.Item>
</ListGroup>

<ListGroup horizontal={"md"} as="ul">
	<ListGroup.Item as="li">An item</ListGroup.Item>
	<ListGroup.Item as="li">A second item</ListGroup.Item>
	<ListGroup.Item as="li">A third item</ListGroup.Item>
</ListGroup>

<ListGroup horizontal={"lg"} as="ul">
	<ListGroup.Item as="li">An item</ListGroup.Item>
	<ListGroup.Item as="li">A second item</ListGroup.Item>
	<ListGroup.Item as="li">A third item</ListGroup.Item>
</ListGroup>

<ListGroup horizontal={"xl"} as="ul">
	<ListGroup.Item as="li">An item</ListGroup.Item>
	<ListGroup.Item as="li">A second item</ListGroup.Item>
	<ListGroup.Item as="li">A third item</ListGroup.Item>
</ListGroup>

<ListGroup horizontal={"xxl"} as="ul">
	<ListGroup.Item as="li">An item</ListGroup.Item>
	<ListGroup.Item as="li">A second item</ListGroup.Item>
	<ListGroup.Item as="li">A third item</ListGroup.Item>
</ListGroup>

Checkboxes and radios

Place Bootstrap’s checkboxes and radios within list group items and customize as needed. You can use them without <label> s, but please remember to include an aria-label attribute and value for accessibility.

  • First checkbox
  • Second checkbox
  • Third checkbox
  • Fourth checkbox
  • Fifth checkbox
<ListGroup as="ul">
  <ListGroup.Item as="li" className="d-flex align-items-center gap-1">
    <Form.Check type="checkbox" className="me-1" />
    First checkbox
  </ListGroup.Item>
  <ListGroup.Item as="li" className="d-flex align-items-center gap-1">
    <Form.Check type="checkbox" className="me-1" />
    Second checkbox
  </ListGroup.Item>
  <ListGroup.Item as="li" className="d-flex align-items-center gap-1">
    <Form.Check type="checkbox" className="me-1" />
    Third checkbox
  </ListGroup.Item>
  <ListGroup.Item as="li" className="d-flex align-items-center gap-1">
    <Form.Check type="checkbox" className="me-1" />
    Fourth checkbox
  </ListGroup.Item>
  <ListGroup.Item as="li" className="d-flex align-items-center gap-1">
    <Form.Check type="checkbox" className="me-1" />
    Fifth checkbox
  </ListGroup.Item>
</ListGroup>

Contextual classes

Use contextual classes to style list items with a stateful background and color.

Dapibus ac facilisis in
This is a Primary list group item
This is a Secondary list group item
This is a Success list group item
This is a Danger list group item
This is a Warning list group item
This is a Info list group item
This is a Light list group item
This is a Dark list group item
<ListGroup>
    <ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item>
    <ListGroup.Item variant="primary">This is a Primary list group item</ListGroup.Item>
    <ListGroup.Item variant="secondary">This is a Secondary list group item</ListGroup.Item>
    <ListGroup.Item variant="success">This is a Success list group item</ListGroup.Item>
    <ListGroup.Item variant="danger">This is a Danger list group item</ListGroup.Item>
    <ListGroup.Item variant="warning">This is a Warning list group item</ListGroup.Item>
    <ListGroup.Item variant="info">This is a Info list group item</ListGroup.Item>
    <ListGroup.Item variant="light">This is a Light list group item</ListGroup.Item>
    <ListGroup.Item variant="dark">This is a Dark list group item</ListGroup.Item>
</ListGroup>

With badges

Add badges to any list group item to show unread counts, activity, and more with the help of someutilities.

Cras justo odio 14
Dapibus ac facilisis in 2
Morbi leo risus 1
<ListGroup>
	<ListGroup.Item className="d-flex justify-content-between align-items-center">
	Cras justo odio <Badge bg="primary">14</Badge>{" "}
	</ListGroup.Item>
	<ListGroup.Item className="d-flex justify-content-between align-items-center">
	Dapibus ac facilisis in <Badge bg="danger">2</Badge>
	</ListGroup.Item>
	<ListGroup.Item className="d-flex justify-content-between align-items-center">
	Morbi leo risus <Badge bg="warning">1</Badge>
	</ListGroup.Item>
</ListGroup>
Contents