List

Basic List

The most basic list group is simply an ordered list with list items, and the proper classes. Build upon it with the options that follow, or your own CSS as needed.

• 1. Active
• 2. Dapibus ac facilisis in
• 3. Morbi leo risus
• 4. Disabled
• 5. Vestibulum at eros

List Group Bordered Style

Add the .list-group-bordered to the wrap.

• 1. Active
• 2. Dapibus ac facilisis in
• 3. Morbi leo risus
• 4. Disabled
• 5. Vestibulum at eros

List Group With Divider line

Add the .list-group-dividered to the wrap.

• 1. Active
• 2. Dapibus ac facilisis in
• 3. Morbi leo risus
• 4. Disabled
• 5. Vestibulum at eros

Tag-pills List

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

• 6 Cras justo odio
• Dapibus ac facilisis in
• 3 Morbi leo risus
• 10 Porta ac consectetur ac
• Vestibulum at eros
• Ibus ac facilis

Linked Items

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

Background

Add the color by .bg-* to the wrap. Also your will be add the class with .bg-inherit

Contextual Classes

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

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

Custom Content

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

With Gap

Add the .list-group-gap to the wrap for gap the items.

• Inbox
• Profile visits
• Call
• Messages
• Bookmarks

Media List

A list item can contain an image, user name and description.

• 

  Edward Fletcher

  Cras sit amet nibh libero, in gravida nulla. Nulla vel metus.

• 

  Crystal Bates

  Porta ac consectetur ac. Porta ac consectetur ac.

• 

  Nathan Watts

  Cbh libero, in gravida nulla. Nulla vel metus.

• 

  Heather Harper

  Bbh libero, in gravida nulla. Nulla vel metus.