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.

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

• 

  Jon Snow

  Senior Developer

• 

  Jeremy Lawson

  Systems

• 

  Josh Williamson

  UI/UX Designer

• 

  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

Contextual classes with Link

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

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+