The most basic list group is simply 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

Add the badges component to any list group item and it will automatically be positioned on the right.

• Cras justo odio 14 new
• Dapibus ac facilisis in 99 read
• Morbi leo risus 99+
• Porta ac consectetur ac 21
• Vestibulum at eros 18

Linkify list group items by using anchor tags instead of list items (that also means a parent <div>instead of an <ul>). No need for individual parents around each element.

List group items may be buttons instead of list items (that also means a parent <div>instead of an <ul>). No need for individual parents around each element. Don't use the standard .btnclasses here.

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

• Dapibus ac facilisis in
• Cras sit amet nibh libero
• Porta ac consectetur ac
• Vestibulum at eros

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

You can use material design colors which examples are .list-group-bg-pink, .list-group-bg-cyanclass

• Dapibus ac facilisis in
• Cras sit amet nibh libero
• Porta ac consectetur ac
• Vestibulum at eros

Add nearly any HTML within, even for linked list groups like the one below.