List groups
Customize lists using a convenient component.
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
Flexibility
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