Single line list

Use the .list-group-item class with any a, button or li element inside a .list-group element.

  • Text only
  • Active item
  • Disabled item

Single line compact list

Use the .list-group-item class with any a, button or li element inside a .list-group.bmd-list-group-sm element.

  • Text only
  • Active item
  • Disabled item

Double line list

Use the .bmd-list-group-col class inside the .list-group-item for double line lists.

  • List group item heading

    Some text

  • List group item heading

    Some text

  • List group item heading

    Some text

Double line compact list

Add the .bmd-list-group-sm class to the .list-group and use the .bmd-list-group-col class inside the .list-group-item for compact double line lists.

  • List group item heading

    Some text

  • List group item heading

    Some text

  • List group item heading

    Some text

Lists with icons, images or tags

Add icons and tags to the .list-group-item and combine it with the .bmd-list-group-col class for lists with icons, images or tags.

  • inbox

    List group item heading

    Icon left

  • 14

    List group item heading

    Tag to the left

  • image

    List group item heading

    Image to the left

  • List group item heading

    Icon right

    face
  • List group item heading

    Tag to the right

    14
  • List group item heading

    Image to the right

    image

Single with icons and tags

Use the .list-group-item class with any icon or text.

  • inbox Icon left
  • 14 Tag pill left
  • inbox Icons left and right face
  • 14 Tag pill left and right 14
  • Icon right face
  • Tag pill right 14
  • 14 Tag pill and icon inbox
  • inbox Icon and tag pill 14

Three line list

Use the .list-group-item class with any a, button or li element inside a .list-group element.

  • Linked list group item heading

    This allows more than two lines. Hopefully an ellipsis ends this text.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut malesuada elit. Proin tristique, lorem eu vehicula congue, lectus ipsum porta quam, eget rutrum sapien turpis et libero.

  • Text list group item heading

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut malesuada elit. Proin tristique, lorem eu vehicula congue, lectus ipsum porta quam, eget rutrum sapien turpis et libero.