Simple List Group

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

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

Disabled items

Add .disabled to a .list-group-item to gray it out to appear disabled.

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

Numbered

Just add the .list-group-numbered modifier class to opt into numbered list group items.

  • Cupcake sesame snaps dessert marzipan.
  • Jelly beans jelly-o gummi bears chupa chups marshmallow.
  • Bonbon macaroon gummies pie jelly

Icon & Badges

Use Utility classes .d-flex align-items-center to create space between badge and your content

  • Biscuit jelly beans macaroon danish pudding. 4
  • chocolate cheesecake candy 2
  • Oat cake icing pastry pie carrot 1

Anchors

Use anchors to create actionable list group items with hover, disabled, and active states by adding .list-group-item-action. This separate class contains a few overrides to add compatibility for <a> as well as the hover and focus states.

Buttons

You can use .list-group-item-action for <button> tag also. This separate class contains a few overrides to add compatibility for <button>s as well as the hover and focus states. Be sure to not use the standard .btn classes here.

Contextual classes

Use contextual classes to style list items, default or linked. Also includes .active state.

  • 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 dark list group item

Flush

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

  • Sweet gummi bears gingerbread carrot
  • Cake macaroon brownie wafer soufflĂ©
  • Jelly beans lemon drops
  • Lollipop ice cream donut chupa chups
  • Chocolate candy canes tootsie roll

Horizontal

Add .list-group-horizontal to change the layout of list group items from vertical to horizontal across all breakpoints. Choose a responsive variant code .list-group-horizontal-{sm|md|lg|xl} to make a list group horizontal starting at that breakpoint’s min-width.

horizontal list groups cannot be combined with flush list groups.
  • Chocolate cake
  • Cookie pie
  • Cheesecake
  • Cotton candy

List Group Navigation

You can activate a list group navigation without writing any JavaScript by simply specifying data-bs-toggle="list" or on an element. Use these data attributes on .list-group-item.