Basic example

Create a list using the div element. It is not necessary to use ul.

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

In the list items you can put absolutely any HTML-code.

Use the .disable class to turn off the item, use the links as a list item, add budges and more.

Contextual alternatives

Highlight the list items using contextual classes.

Supported classes
  • .list-group-item-primary
  • .list-group-item-secondary
  • .list-group-item-default
  • .list-group-item-success
  • .list-group-item-info
  • .list-group-item-warning
  • .list-group-item-danger
  • .list-group-item-dark
Normal state item are many variations
Normal state item of Lorem Ipsum
Normal state item but the majority have
Div item secondary | default
Normal state item suffered alteration in some form
Div item success
Normal state item randomised words
Normal state item predefined chunks
Link item warning
Normal state item combined with a handful
Div item danger
Normal state item embarrassing hidden in the middle
Link item dark
Normal state item free from repetition