Media Object

Prev Next

The Media Object is a flexible layout pattern for placing an image or icon alongside a block of text — a reviewer's avatar next to their comment, an icon next to a short description, or, as we'll build below, a hiker's photo next to their trail review. Bootstrap 3 builds it from a small family of classes: .media on the wrapper, .media-left/.media-right on the side that holds the image, .media-object on the image itself, and .media-body on the text block that grows to fill the remaining space.

The one with the longest lifespan. Unlike Panels, Wells, and Thumbnails — all three retired into Card in Bootstrap 4 — the Media Object survived into Bootstrap 4 essentially unchanged. It wasn't removed until Bootstrap 5, which dropped it in favor of building the same layout from flexbox utility classes (.d-flex, .flex-grow-1). So this component outlived its three Bootstrap-3-era siblings by a full major version.

1. The Basic Pattern: .media / .media-left / .media-body

The image sits inside .media-left (or .media-right for the mirrored layout), tagged with .media-object; the text sits in the sibling .media-body, with a .media-heading for its title.

<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="avatar.jpg" alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    Cras sit amet loremipsum dolor. Nam nec tellus a odio tincidunt auctor a ornare.
  </div>
</div>

2. Nesting Media Objects

Because .media-body can hold anything, you can nest another .media inside it to build threaded content, such as a reply indented under an original comment.

<div class="media">
  <div class="media-left">
    <img class="media-object" src="avatar-1.jpg" alt="...">
  </div>
  <div class="media-body">
    <h4 class="media-heading">Original comment</h4>
    Great trail, saw a fox near the summit!

    <div class="media">
      <div class="media-left">
        <img class="media-object" src="avatar-2.jpg" alt="...">
      </div>
      <div class="media-body">
        <h4 class="media-heading">Reply</h4>
        Nice, which month did you go?
      </div>
    </div>
  </div>
</div>

3. Worked Example: TrailMap Trail Reviews

Here's a list of hiker reviews on a TrailMap trail page, each built as a Media Object — the reviewer's avatar on the left, their name and star rating in the heading, and the review text filling the rest of the row.

<!-- TrailMap: trail review list -->
<div class="media">
  <div class="media-left">
    <img class="media-object" src="/img/avatars/priya.jpg" style="width: 48px; height: 48px;" alt="Priya">
  </div>
  <div class="media-body">
    <h4 class="media-heading">Priya — ★★★★★</h4>
    Stunning ridge views once you clear the treeline. Bring more water than you think you need.
  </div>
</div>
<div class="media" style="margin-top: 20px;">
  <div class="media-left">
    <img class="media-object" src="/img/avatars/marcus.jpg" style="width: 48px; height: 48px;" alt="Marcus">
  </div>
  <div class="media-body">
    <h4 class="media-heading">Marcus — ★★★★</h4>
    Well-marked trail, moderate difficulty matches the listing. Parking lot fills up early on weekends.
  </div>
</div>

Next up: reviews like these are often summarized in a simple bordered list rather than full media rows — head to List Group to build TrailMap's "recent reviews" list.

Prev Next