Lists
Basic Example
List groups are a flexible and powerful component for displaying a series of content.
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Disabled
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
Links and buttons
Uses <a> or <button>s to create actionable list group itemswith hover and active states by adding .list-group-item-action.
Flush
Add .list-group-flush to remove some borders and rounded corners.
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Vestibulum at eros
Horizontal
Add .list-group-horizontal to change the layout of list group items from vertical
- Cras justo
- Dapibus
- Morbi leo
With badges
Add badges to any list group item to show unread counts, activity.
-
Cras justo odio4
-
New NotificationsNew
-
Payment SuccessfullSuccessfully
-
Payment pendingPending
-
Good Morning!1
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