List Media

Basic Example

The most basic list group is simply an unordered list with list items, and the proper classes.

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

With Badges

Add the badges component to any list group item and it will automatically be positioned on the right.

  • Cras justo odio 14
  • Dapibus ac facilisis in 2
  • Morbi leo risus 1
  • Cras justo odio 14
  • Dapibus ac facilisis in 2

Linked Items

Linkify list group items by using anchor tags instead of list items (that also means a parent <div> instead of an <ul>). No need for individual parents around each element.

Button Items

List group items may be buttons instead of list items (that also means a parent <div> instead of an <ul>). No need for individual parents around each element. Don't use the standard .btn classes here.

Disabled Items

Add .disabled to a .list-group-item to gray it out to appear disabled.

Contextual Classes

Use contextual classes to style list items, default or linked. Also includes .active state.

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