Bootstrap List Groups

Basic List Groups

The most basic list group is an unordered list with list items:

• First item
• Second item
• Third item

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

<ul class="list-group">  <li class="list-group-item">First item</li>  <li class="list-group-item">Second item</li>  <li class="list-group-item">Third item</li></ul>

Contextual Classes

Contextual classes can be used to color list items:

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

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

<ul class="list-group">  <li class="list-group-item list-group-item-success">First item</li>  <li class="list-group-item list-group-item-info">Second item</li>  <li class="list-group-item list-group-item-warning">Third item</li>  <li class="list-group-item list-group-item-danger">Fourth item</li></ul>