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