List Group

List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.

Every example is using at least the item_text variable. Because of how many classes can be applied to each list item, item_classes is an empty array for the user to put their classes in.

Basic Examples

This shows a basic list group and how individual list items' color can be changed by adding list-group-item-(color) to the item_classes variable
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
  • Porta ac consectetur ac
  • Dapibus ac facilisis in
  • Porta ac consectetur ac
  • Cras justo odio
  • Vestibulum at eros
  • Cras justo odio
  • Dapibus ac facilisis in
  • Cras justo odio

Active and Disabled Items

Add the active class to a list-item to indicate the current active selection. Add the disabled class to a list-item to make it appear disabled. Add the action class to make the list-item change on hover

Active Items

  • Dapibus ac facilisis in
  • Vestibulum at eros
  • Morbi leo risus
  • Porta ac consectetur ac
  • Cras justo odio

Disabled Items

  • Porta ac consectetur ac
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Morbi leo risus
  • Morbi leo risus

Action

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros

Other elements

Lists are usually made of li tags, but they can be made of div, a, and button tags as well

Link List

Button

Adding Elements

List items can contain things like badges and custom html. The badges are using several utility classes to display correctly including list-group-item-warning, justify-content-between, d-flex, align-items-center

Badges

  • Cras justo odio badge
  • Dapibus ac facilisis in badge
  • Morbi leo risus badge
  • Porta ac consectetur ac badge
  • Vestibulum at eros badge

Custom HTML

  • List group item heading
    3 days ago

    Donec 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 ago

    Donec 8id 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 ago

    Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

    Donec id elit non mi porta.

Toggleable Items

List items can use the tab Javascript plugin to allow list group to create tabbable panes of content. You can activate a list group navigation without writing any JavaScript by simply specifying data-toggle="list" or on an element. Use these data attributes on .list-group-item.

To make tabs panel fade in, add .fade to each .tab-pane. The first tab pane must also have .show to make the initial content visible.

More Info

Toggleable

Home Profile Messages Settings
This is home content!
This is profile content!
This is messages content!
This is settings content!