List Group

List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within. Read bootstrap documentaion for more details.

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

Use <a>s or <button>s to create actionable list group items with hover, disabled, and active states by adding .list-group-item-action. Read bootstrap documentaion for more details.

Use contextual classes to style list items with a stateful background and color. Read bootstrap documentaion for more details.

• 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

Add badges to any list group item to show unread counts, activity, and more. Read bootstrap documentaion for more details.

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

Add .disabled to a .list-group-item to make it appear disabled. Read bootstrap documentaion for more details.

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

Add nearly any HTML within, even for linked list groups like the one below, with the help of flexbox utilities. Read bootstrap documentaion for more details.