Panels

Prev Next

A panel is a bordered, padded content box built for grouping structured content — a heading, a body, and an optional footer, all in one boxed unit. It's the closest thing Bootstrap 3 has to a general-purpose "card" pattern, built from the base .panel class plus one of the contextual style names as .panel-{style}.

One of three components later merged into Card. In Bootstrap 3, Panels, Wells, and Thumbnails are three completely separate components, each with its own class and its own use case: a Panel for structured heading/body/footer content, a Well for a plain padded box, and a Thumbnail for an image-plus-caption grid item. Bootstrap 4 looked at the overlap between them and merged all three into a single, more flexible Card component (.card / .card-header / .card-body / .card-footer / .card-img-top). This lesson covers the Panel half of that story; Wells and Thumbnails get their own lessons next, and the full mapping is covered later in Migrating to Bootstrap 4.

1. Basic Panel: .panel + .panel-default

The plain .panel-default style gives a neutral grey-bordered box with just a body — no heading required.

<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

2. Panel Heading, Title & Contextual Styles

Add a .panel-heading above the body, with an .panel-title inside it for the heading text. Six contextual styles are available: .panel-default, .panel-primary, .panel-success, .panel-info, .panel-warning, and .panel-danger — each tints the heading background and border to match.

<div class="panel panel-primary">
  <div class="panel-heading">
    <h3 class="panel-title">Panel Title</h3>
  </div>
  <div class="panel-body">
    Some quick example content for this panel.
  </div>
</div>

3. Panel Footer

An optional .panel-footer sits below the body, commonly used for a summary line or an action button.

<div class="panel panel-success">
  <div class="panel-heading">
    <h3 class="panel-title">Trail Reported Clear</h3>
  </div>
  <div class="panel-body">
    No hazards reported by hikers in the last 7 days.
  </div>
  <div class="panel-footer">Last checked: 3 hours ago</div>
</div>

4. Tables Inside Panels: .panel > .table

Drop a plain .table directly inside a .panel (as a sibling of .panel-heading, not inside .panel-body) and Bootstrap 3 automatically removes the table's outer double borders so it sits flush against the panel's own border — no extra classes needed.

<div class="panel panel-default">
  <div class="panel-heading">Panel with a table</div>
  <table class="table">
    <tbody>
      <tr><td>Distance</td><td>8.2 mi</td></tr>
      <tr><td>Elevation Gain</td><td>1,450 ft</td></tr>
    </tbody>
  </table>
</div>

5. Worked Example: TrailMap Trail-Detail Panel

TrailMap's trail-detail page wraps everything about a trail — name, description, stats table, and a save action — in a single primary panel.

<!-- TrailMap: trail-detail panel -->
<div class="panel panel-primary">
  <div class="panel-heading">
    <h3 class="panel-title">Sunset Ridge Trail</h3>
  </div>
  <div class="panel-body">
    <p>A moderate ridgeline hike with sweeping views at sunset. Best hiked in the last two hours before dusk.</p>
  </div>
  <table class="table">
    <tbody>
      <tr><td>Distance</td><td>8.2 mi round trip</td></tr>
      <tr><td>Elevation Gain</td><td>1,450 ft</td></tr>
      <tr><td>Difficulty</td><td>Moderate</td></tr>
    </tbody>
  </table>
  <div class="panel-footer">
    <button class="btn btn-primary">Save This Trail</button>
  </div>
</div>

Panel → Card, at a glance:

Bootstrap 3 (Panel)	Bootstrap 4+ (Card)
`.panel` + `.panel-{style}`	`.card` + `.bg-{style}`/`.text-{style}`
`.panel-heading` / `.panel-title`	`.card-header` / `.card-title`
`.panel-body`	`.card-body`
`.panel-footer`	`.card-footer`

Next up: not every boxed section needs a heading and footer structure — for a plain padded box, Bootstrap 3 has a lighter-weight component. Head to Wells.

Prev Next