List Groups

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>

The same classes also work directly on a <div>/<a> structure when an item needs to hold richer markup than plain text, which the worked example below uses.

2. Clickable/Actionable Items: .list-group-item-action

Add .list-group-item-action to get hover and focus styles, signalling that an item is interactive — the standard choice when each <a> or <button> item links somewhere or triggers something.

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

3. Flush List Groups: .list-group-flush

.list-group-flush removes the outer border and rounded corners, so the list sits flush against whatever container it's placed in — the common choice when a list group lives inside a card body rather than standing on its own.

<div class="card">
  <div class="card-header">Trail Checklist</div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Water — 2 liters minimum</li>
    <li class="list-group-item">Map or offline GPS</li>
    <li class="list-group-item">Sun protection</li>
  </ul>
</div>

4. Worked Example: TrailMap Recent Reviews

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

<div class="card">
  <div class="card-header">Recent Reviews</div>
  <div class="list-group list-group-flush">
    <div class="list-group-item">
      <div class="d-flex justify-content-between">
        <h6 class="mb-1">Priya S.</h6>
        <span class="badge badge-success">★ 5.0</span>
      </div>
      <p class="mb-0 text-muted">The views alone are worth the climb.</p>
    </div>
    <div class="list-group-item">
      <div class="d-flex justify-content-between">
        <h6 class="mb-1">Marcus T.</h6>
        <span class="badge badge-warning">★ 4.0</span>
      </div>
      <p class="mb-0 text-muted">Steep in the last mile, bring good shoes.</p>
    </div>
  </div>
</div>