List Groups

Speaker Notes:

There is a whole category of classes that are technically a component, but control how lists of things are displayed. They can also be used inside many components so let's check them out.

List Groups

list-group list-group-item

• Modifiers

active aria-current="true"

disabled tabindex="-1" aria-disabled="true"

Try it

The most basic list group is created by adding a list-group class to an unordered list container and a series of list-group-item classes on the list items.

Also, when you add the action class you should also act the aria-current="true" property to your tag.

In the same way, for the disabled class, you should add tabindex="-1" and aria-disabled="true"

Flush List Groups

• list-group-flush

Try it

You can add a list-group-flush class so that the lists don't have any outlines.

Actionable Items

• list-group-item-action

Try it

You can make a list of anchor links or buttons into a list group by adding a list-group-item-icon class. This also sets up a hover style when you roll over the links.

Horizontal

• list-group-horizontal{-BR}
  • BR: sm md lg xl xxl

Try it

You can also make the lists display as horizontal elements that look like cells.

Contextual Colors

• list-group-item{-COL}
  • COL: primary secondary success danger warning info light dark

Try it

There are contextual color classes you can use to put some colors behind each of the list items. Like the other classes they will work with buttons and links too.