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

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

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

  • admin-profile
    Easy Customization

    List groups are a flexible and powerful component for displaying simple.

  • admin-profile
    Easy Customization

    List groups are a flexible and powerful component for displaying simple.

  • admin-profile
    Easy Customization

    List groups are a flexible and powerful component for displaying simple.

Task

Feeds

  • AC
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • AK
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • SP
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.