Clay CSS v3.4.0

List Groups

List Group Item Flex

Align content inside .list-group-item with flexbox with .list-group-item-flex.

Use a combination of .autofit-col and .autofit-col.autofit-col-expand to control the size of each cell.

show-quick-actions-on-hover will need Javascript to add class table-focus on the table row when an item inside is focused to make it keyboard accessible.

List Group Sm

List Group Notification

List Group Bordered

Use .list-group-bordered on .list-group to style .list-group-item-flex like a table.

List Group Header

With Buttons

List Item 1 List Item 2 List Item 4

Contextual List Group

  • List Item Normal
  • List Item Success
  • List Item Info
  • List Item Warning
  • List Item Danger
  • List Item Light
  • List Item Dark

Linked Contextual List Groups

List Item Action Normal List Item Action Success List Item Action Info List Item Action Warning List Item Action Danger List Item Action Light List Item Action Dark
List Item Action Normal Active List Item Action Success Active List Item Action Info Active List Item Action Warning Active List Item Action Danger Active List Item Action Light Active List Item Action Dark Active