List Style

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

With Gap

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

  • Inbox
  • Profile visits
  • Call
  • Messages
  • Bookmarks

User List

A list item can contain an image with state.

  • ...
    Herman Beck
    CEO
  • ...
    Mary Adams
    CIO
  • ...
    Caleb Richards
    CTO
  • ...
    June Lane
    CVO

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.