List group

Examples

The most basic list group is an unordered list with list items and the proper classes. Build upon it with the options that follow, or with your own CSS as needed.

• An item
• A second item
• A third item
• A fourth item
• And a fifth one

Active items

Add .active to a .list-group-item to indicate the current active selection.

• An .primary.active item
• A second item
• A third item
• A fourth item
• And a fifth one

Disabled items

Add .disabled to a .list-group-item to make it appear disabled. Note that some elements with .disabled will also require custom JavaScript to fully disable their click events (e.g., links).

• A .primary.disabled item
• A second item
• A third item
• A fourth item
• And a fifth one

Contextual classes

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

• .list-group-item.primary
• .list-group-item.secondary
• .list-group-item.red
• .list-group-item.green
• .list-group-item.blue
• .list-group-item.yellow
• .list-group-item.white
• .list-group-item.black

Contextual classes also work with .list-group-item-action. Note the addition of the hover styles here not present in the previous example. Also supported is the .active state; apply it to indicate an active selection on a contextual 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.

• A list item 14
• A second list item 2
• A third list item 1

No border

Add .no-border or .no-padding to the .list-group or .list-group-item to remove to border or padding.

• A list item without border
• A second list item
• A third list item

Responsive

Add .list-group-item-horizontal or .list-group-item-space-between to the .list-group-item to add more responsiveness to the list.

• .list-group-item .list-group-item-horizontal

• .list-group-item .list-group-item-space-between

• .list-group-item .list-group-item-column