List Group

Prev Next

A list group is a flexible container for a series of related items — a bulleted list styled with visible borders instead of bullets. TrailMap uses one for its recent-reviews list, but the same component fits any "series of rows" pattern: settings menus, search results, simple to-do lists.

1. Basic List Group: .list-group + .list-group-item

Build the list from an unordered list, applying .list-group to the <ul> and .list-group-item to each <li>.

<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
</ul>

2. Linked List Items Get Hover States Automatically

Swap the <li> tags for <a> tags (still with .list-group-item) and Bootstrap 3 automatically applies a hover and focus background to each one — there's no separate "actionable" class to remember. Add .active to mark the current item.

<div class="list-group">
  <a href="#" class="list-group-item active">Current: Sunset Ridge Trail</a>
  <a href="#" class="list-group-item">Ridgeline Loop</a>
  <a href="#" class="list-group-item">Cedar Creek Path</a>
</div>

No .list-group-item-action needed. Bootstrap 4 later added a dedicated .list-group-item-action class that a linked or button-based item must carry to get the hover/focus treatment. In Bootstrap 3, any <a> or <button> tagged .list-group-item gets it for free, just from the tag name.

3. Contextual Classes

Color individual items with the same contextual naming used elsewhere in Bootstrap 3: .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">Trail clear, no hazards</li>
  <li class="list-group-item list-group-item-warning">Muddy in the last mile</li>
  <li class="list-group-item list-group-item-danger">Bridge washed out, detour required</li>
</ul>

4. Badges Inside List Items

A .badge floats to the right inside a .list-group-item automatically, making it a natural fit for unread counts or short numeric labels. See the Badges lesson for the badge component itself.

<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">4</span>
    New reviews
  </li>
</ul>

5. Worked Example: TrailMap Recent Reviews

On a trail's detail page, TrailMap lists its most recent reviews in a list group, each row holding a reviewer name, a rating badge, and a short comment.

<!-- TrailMap: recent reviews list group -->
<div class="list-group">
  <div class="list-group-item">
    <span class="badge">5.0</span>
    <h4 class="list-group-item-heading">Priya S.</h4>
    <p class="list-group-item-text">The views alone are worth the climb.</p>
  </div>
  <div class="list-group-item">
    <span class="badge">4.0</span>
    <h4 class="list-group-item-heading">Marcus T.</h4>
    <p class="list-group-item-text">Steep in the last mile, bring good shoes.</p>
  </div>
</div>

Next up: TrailMap's trail-detail page also embeds a short video guide for some trails — head to Responsive Embed to see how it stays fluid at every screen width.

Prev Next