List Group
Basic
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
- Vestibulum at eros
Links
Change all the li
tags to a
tags to convert it into a link
Flush
Add .list-group-flush
to remove some borders and rounded corners.
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
with Badges
Add badges to any list group item with the help of some utilities classes and those are .d-flex
, .justify-content-between
, .align-items-center
Contextual Basic
Use .list-group-item-*
with .pimary
, .success
etc. to change list group in contextual.
- Dapibus ac facilisis in
- This is a primary list group item
- This is a secondary list group item
- This is a success list group item
- This is a danger list group item
- This is a warning list group item
- This is a info list group item
- This is a dark list group item
Contextual Link
Change all the li
tags to a
tags to convert it into a link
Custom content
To customise list group use flexbox utilities.
List group item heading
3 days agoDonec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.List group item heading
3 days agoDonec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.List group item heading
3 days agoDonec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.List group item heading
3 days agoDonec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.With Custom Icons
-
Easy Customization
List groups are a flexible and powerful component for displaying simple.
-
Easy Customization
List groups are a flexible and powerful component for displaying simple.
-
Easy Customization
List groups are a flexible and powerful component for displaying simple.
With Media
-
Easy Customization
List groups are a flexible and powerful component for displaying simple.
-
Easy Customization
List groups are a flexible and powerful component for displaying simple.
-
Easy Customization
List groups are a flexible and powerful component for displaying simple.
Task
Feeds
-
ACLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-
AKLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-
SPLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.