Basic Example

for basic none bordered list use ul/div with .list-group.no-border

• 1. Cras justo odio
• 2. Dapibus ac facilisis in
• 3. Morbi leo risus
• 4. Porta ac consectetur ac
• 5. Vestibulum at eros

Linked Items

use anchor tags instead of list items, that also means a parent <div> instead of an <ul>

Disabled Items

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

Contextual Classes

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

• List group item primary
• List group item info
• List group item success
• List group item warning
• List group item danger
• List group item pink
• List group item purple
• List group item inverse

Custom Content

Custom heading and text .list-group-item-heading .list-group-item-text

Badge List

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

• 5Cras justo odio
• 11Dapibus ac facilisis in
• 4Morbi leo risus
• 14Porta ac consectetur ac
• 26Vestibulum at eros