List Groups

To create a basic list group,use an <ul>element with class .list-group,and<li>elements with class .list-group-item:

  • First item
  • Second item
  • Third item

List Group With Badges

To create a badge,create a <span>element with class .badgeinside the list item:

  • New 12
  • Deleted 5
  • Warnings 3

List Group With Linked Items

To create a list group with linked items,use <div>instead of <ul>and <a>instead of <li>:

Active State

Use the .activeclass to highlight the current item:

Disabled Item

To disable an item,add the .disabledclass:

Contextual Classes

The classes for coloring list-items are:.list-group-item-success,list-group-item-info,list-group-item-warning,and .list-group-item-danger:

  • First item
  • Second item
  • Third item
  • Fourth item

Custom Content

Bootstrap provides the classes .list-group-item-headingand .list-group-item-textwhich can be used as follows: