Basic list group

Basic list with borders, you can use flags and badges on the right.

To use just add a span badges with badge badge-primary class element. Replaced primary by success, info, warning, danger or royal, depending on the color you want.

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

Link lists

The link lists are created with a div element of class list-group composed of elements a of the class list-group-item.

You can also use badges and flags. as in Item Lists.

Colorful elements

You can use the class list-item-group-success or -info, -warning, -danger, -royal for coloring and highlighting elements of a list.

• Dapibus ac facilisis in
• Cras sit amet nibh libero
• Porta ac consectetur ac
• Vestibulum at eros
• Dapibus ac facilisis in

compressed lists

You can use the list-group-sm class to make more compact lists.

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

• 14 Cras justo odio
• 778 Cras justo odio
• 9 Dapibus ac facilisis in
• 98 Cras justo odio
• 17 Vestibulum at eros

Content lists

You can also can add content such as headers and paragraphs to lists of links.

Use the class active to highlight the currently active element.

Basic Media list

Use the media class to display multimedia content with a description beside her. They can be images, videos or other multimedia objects.

Use the media-object classes and media-heading for the media item and the item title respectively.