List Group
Basic List Group
Use
list-group
&
list-group-item
class to create a List Group.
- Profile
- Settings
- Messages
- Download
Active Item
Use
active
class to make an item active.
- Profile
- Settings
- Messages
- Download
Disabled Item
Use
disabled
class to make an item disabled.
- Profile
- Settings
- Messages
- Download
List Group With Icons
Example of list group with icons.
- Profile
- Settings
- Messages
- Download
List Group With Color
Use
list-group-item-{color}
class to add color. Available colors are -
primary
,
secondary
,
success
,
danger
,
info
,
warning
,
dark
.
- 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 danger list group item
- A simple warning list group item
- A simple dark list group item
List Group Button
Use
list-group-action
class to make a List Group with button.
List Group Avatar
Example of List Group with avatar.
-
Calvin Hawkins
hawkins@example.com
-
Calvin Hawkins
hawkins@email.com
-
Calvin Hawkins
calvin@example.com
-
Calvin Hawkins
calvin.hawkins@example.com
List Group Custom Content
Example of List Group with custom contend and utility classes
-
List group item heading
1 day agoLorem Ipsum is simply dummy text of the printing and of the printing and...
-
List group item heading
1 day agoLorem Ipsum is simply dummy text of the printing and of the printing and...
-
List group item heading
1 day agoLorem Ipsum is simply dummy text of the printing and of the printing and...