List Groups

A list group is a flexible, styled list for displaying a series of related items — a settings menu, search results, a simple to-do list, or (as in TrailMap's case) a stack of trail reviews. It's built from plain <ul>/<li> or <div> markup, with no JavaScript required for the static version covered in this lesson.

1. The Base List Group: .list-group, .list-group-item

Wrap your items in .list-group, and style each item with .list-group-item. You can build this with an unordered list or with plain divs — both are valid.

<ul class="list-group">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>

2. Clickable, Hoverable Items: .list-group-item-action

When each item is really a link or a button — not just static text — add .list-group-item-action for hover/focus/active styling that signals it's interactive. This works on <a> or <button> items (swap the wrapping tag from <ul> to <div> when using anchors).

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
    Cedar Creek Trail
  </a>
  <a href="#" class="list-group-item list-group-item-action">
    Summit Vista
  </a>
  <a href="#" class="list-group-item list-group-item-action">
    Ridgeline Loop
  </a>
</div>

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

.list-group-flush removes the list group's own rounded corners and outer border, leaving only the borders between items. It's the standard way to drop a list group cleanly inside another container — most often a .card-body — without a double border.

<div class="card">
  <div class="card-header">Nearby Trails</div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cedar Creek Trail · 2.1 mi</li>
    <li class="list-group-item">Summit Vista · 6.0 mi</li>
  </ul>
</div>

4. Worked Example: TrailMap "Recent Reviews"

The trail detail page shows recent hiker reviews as a flush list group embedded directly in a card, with each review's rating shown as a badge from the earlier lesson.

<div class="card">
  <div class="card-header">Recent Reviews</div>
  <ul class="list-group list-group-flush">

    <li class="list-group-item d-flex justify-content-between align-items-start">
      <div>
        <strong>Priya S.</strong> — The views alone are worth the climb.
      </div>
      <span class="badge bg-success rounded-pill">5.0</span>
    </li>

    <li class="list-group-item d-flex justify-content-between align-items-start">
      <div>
        <strong>Marcus T.</strong> — Muddy after rain, bring good boots.
      </div>
      <span class="badge bg-warning text-dark rounded-pill">3.5</span>
    </li>

  </ul>
</div>