Skip to content

Elements:List Groups

Examples

List groups allow the display of simple lists and more complex content in a bold and eye catching manner.

They can be applied to lists or divs containing link or button elements. A wrapper element with the class list-group is required and each list item within the wrapper requires a list-group-item class.

On a ul with list items

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

On a div with links


Active & disabled items

.active and .disabled classes can be applied to list-group-item items to alter their appearance when in those states.

list-group-item-action class can also be applied to list-group-item items to alter their appearance slightly so they look more like buttons.


With badges

You can include "badge" components within the list-group-item elements to indicate counters or highlight an item.

  • Cras justo odio 14
  • Dapibus ac facilisis in new
  • Morbi leo risus updated

Styles

list-group-item elements can be combined with contextual colour styles to alter the row colour.


Striped

Add the class .list-group-striped to add alternating row striping.

  • Cras justo odio 14
  • Dapibus ac facilisis in new
  • Morbi leo risus updated
  • Dapibus ac leo risus hot

Content

List groups support bolder headers and content text using the .list-group-item-heading and .list-group-item-text classes.


Tabbable lists

Awesome Features

99.9% Uptime Free Upgrades Fully Responsive Bug Free

Theme Colours

Green Red Blue Purple Pink Orange Lime Blue-dark Red-dark Brown Cyan-dark Yellow Slate Olive Teal Green-bright

Cookies are NOT enabled so colour selection is not persistent.

Back to main homepage

Back to intro page