Basic Example

The most basic list group is an unordered list with list items and the proper classes.

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

Active items

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

Disabled items

Add .disabled to a .list-group-item to make it appear disabled. Click, Hover will not work here

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

Links and Buttons

Use <a>s or <button>s to create actionable list group items by adding .list-group-item-action.

Cras justo odio Dapibus ac facilisis in Vestibulum at eros

Flush

Add .list-group-flush to remove some borders and rounded corners to render list group items edge-to-edge in a parent container.

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

List group with image

Add .disabled to a .list-group-item to make it appear disabled. Click, Hover will not work here

  • avatar
    Jon Snow

    Senior Developer

  • avatar
    Jeremy Lawson

    Systems

  • avatar
    Josh Williamson

    UI/UX Designer

  • avatar
    Sara Jonas

    UI/UX Designer

Contextual classes

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

  • Dapibus ac facilisis in
  • 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

With badges

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

  • Unread Mails 20
  • Pending Tasks 40
  • Notifications 99+

Please reload the page when you change the viewport size to view the responsive functionalities correctly