Bootstrap: List Groups

Basic example

List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.

<ListGroup>
  <ListGroupItem><LoremIpsum query='3w'/></ListGroupItem>
  <ListGroupItem><LoremIpsum query='3w'/></ListGroupItem>
  <ListGroupItem><LoremIpsum query='3w'/></ListGroupItem>
  <ListGroupItem><LoremIpsum query='3w'/></ListGroupItem>
  <ListGroupItem><LoremIpsum query='3w'/></ListGroupItem>
</ListGroup>

Badges

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

<ListGroup>
  <ListGroupItem><Badge>14</Badge><LoremIpsum query='3w'/></ListGroupItem>
  <ListGroupItem><Badge>2</Badge><LoremIpsum query='3w'/></ListGroupItem>
  <ListGroupItem><Badge>3</Badge><LoremIpsum query='3w'/></ListGroupItem>
  <ListGroupItem><Badge>4</Badge><LoremIpsum query='3w'/></ListGroupItem>
  <ListGroupItem><Badge>5</Badge><LoremIpsum query='3w'/></ListGroupItem>
</ListGroup>

Linked items

Linkify list group items.

<ListGroup>
  <ListGroupItem active><Badge>14</Badge><LoremIpsum query='3w'/></ListGroupItem>
  <ListGroupItem><Badge>2</Badge><LoremIpsum query='3w'/></ListGroupItem>
  <ListGroupItem><Badge>3</Badge><LoremIpsum query='3w'/></ListGroupItem>
  <ListGroupItem><Badge>4</Badge><LoremIpsum query='3w'/></ListGroupItem>
  <ListGroupItem><Badge>5</Badge><LoremIpsum query='3w'/></ListGroupItem>
</ListGroup>

Disabled items

Add disabled to a ListGroupItem to gray it out to appear disabled.

<ListGroup>
  <ListGroupItem disabled><Badge>14</Badge><LoremIpsum query='3w'/></ListGroupItem>
  <ListGroupItem><Badge>2</Badge><LoremIpsum query='3w'/></ListGroupItem>
  <ListGroupItem><Badge>3</Badge><LoremIpsum query='3w'/></ListGroupItem>
  <ListGroupItem><Badge>4</Badge><LoremIpsum query='3w'/></ListGroupItem>
  <ListGroupItem><Badge>5</Badge><LoremIpsum query='3w'/></ListGroupItem>
</ListGroup>

Contextual items

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

<ListGroup>
  <ListGroupItem success><Badge>14</Badge><LoremIpsum query='3w'/></ListGroupItem>
  <ListGroupItem info><Badge>2</Badge><LoremIpsum query='3w'/></ListGroupItem>
  <ListGroupItem warning><Badge>3</Badge><LoremIpsum query='3w'/></ListGroupItem>
  <ListGroupItem danger><Badge>4</Badge><LoremIpsum query='3w'/></ListGroupItem>
</ListGroup>

Custom content

Add nearly any HTML within, even for linked list groups like the one below.

<ListGroup>
  <ListGroupItem active>
    <ListGroupItemHeading>List group item heading</ListGroupItemHeading>
    <ListGroupItemText>
      <LoremIpsum query='2s'/>
    </ListGroupItemText>
  </ListGroupItem>
  <ListGroupItem>
    <ListGroupItemHeading>List group item heading</ListGroupItemHeading>
    <ListGroupItemText>
      <LoremIpsum query='2s'/>
    </ListGroupItemText>
  </ListGroupItem>
  <ListGroupItem>
    <ListGroupItemHeading>List group item heading</ListGroupItemHeading>
    <ListGroupItemText>
      <LoremIpsum query='2s'/>
    </ListGroupItemText>
  </ListGroupItem>
  <ListGroupItem>
    <ListGroupItemHeading>List group item heading</ListGroupItemHeading>
    <ListGroupItemText>
      <LoremIpsum query='2s'/>
    </ListGroupItemText>
  </ListGroupItem>
</ListGroup>