Media Object

The Media Object is a flexible layout pattern for placing an image or icon alongside a block of text — a user avatar next to a comment, an icon next to a description, or, as we'll build below, a reviewer's photo next to their trail review. Bootstrap 4 ships it as two classes: .media on the wrapper and .media-body on the text block that should take up the remaining space.

Bootstrap 4-only pattern: The Media Object was removed in Bootstrap 5 — not because the layout stopped being useful, but because it's fully replicable with the flexbox utilities Bootstrap already ships (.d-flex on the wrapper, .flex-grow-1 on the content block, and .mr-3/.me-3 on the image for spacing). Rather than maintain a dedicated component for something two utility classes already do, the Bootstrap team dropped it. See the side-by-side comparison further down this page.

The Basic .media / .media-body Pattern

.media sets up a flex container; the image (or any fixed-width element) sits as a direct child before .media-body, which grows to fill the remaining horizontal space and holds the heading/text.

<div class="media">
  <img src="avatar.jpg" class="mr-3" alt="...">
  <div class="media-body">
    <h5 class="mt-0">Media heading</h5>
    <p>Cras sit amet loremipsum dolor. Nam nec tellus a odio tincidunt auctor a ornare.</p>
  </div>
</div>

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">
  <img src="avatar-1.jpg" class="mr-3" alt="...">
  <div class="media-body">
    <h5>Original comment</h5>
    <p>Great trail, saw a fox near the summit!</p>
    <div class="media" style="margin-top: 12px;">
      <img src="avatar-2.jpg" class="mr-3" alt="...">
      <div class="media-body">
        <h5>Reply</h5>
        <p>Nice, which month did you go?</p>
      </div>
    </div>
  </div>
</div>

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, star rating, and review text growing to fill the rest of the row.

<!-- TrailMap: trail review list -->
<div class="media mb-3">
  <img src="/img/avatars/priya.jpg" class="mr-3 rounded-circle" style="width: 48px; height: 48px;" alt="Priya">
  <div class="media-body">
    <h5 class="mt-0 mb-1">Priya — ★★★★★</h5>
    <p class="mb-0">Stunning ridge views once you clear the treeline. Bring more water than you think you need.</p>
  </div>
</div>
<div class="media">
  <img src="/img/avatars/marcus.jpg" class="mr-3 rounded-circle" style="width: 48px; height: 48px;" alt="Marcus">
  <div class="media-body">
    <h5 class="mt-0 mb-1">Marcus — ★★★★</h5>
    <p class="mb-0">Well-marked trail, moderate difficulty matches the listing. Parking lot fills up early on weekends.</p>
  </div>
</div>

Bootstrap 5 Side-by-Side: The Flex-Utility Equivalent

Here's the exact same first review rebuilt the Bootstrap 5 way — no .media component at all, just .d-flex on the wrapper and .flex-grow-1 on the text block. The visual result is identical.

<!-- Bootstrap 4: dedicated Media Object component -->
<div class="media mb-3">
  <img src="/img/avatars/priya.jpg" class="mr-3 rounded-circle" style="width: 48px; height: 48px;" alt="Priya">
  <div class="media-body">
    <h5 class="mt-0 mb-1">Priya</h5>
    <p class="mb-0">Stunning ridge views once you clear the treeline.</p>
  </div>
</div>

<!-- Bootstrap 5: same layout, built entirely from flex utilities -->
<div class="d-flex mb-3">
  <img src="/img/avatars/priya.jpg" class="me-3 rounded-circle" style="width: 48px; height: 48px;" alt="Priya">
  <div class="flex-grow-1">
    <h5 class="mt-0 mb-1">Priya</h5>
    <p class="mb-0">Stunning ridge views once you clear the treeline.</p>
  </div>
</div>

Note the mr-3 → me-3 rename too — that's a separate Bootstrap 5 change (margin/padding utilities became direction-agnostic -s/-e for RTL support), covered in the Spacing Utilities lesson.

Up next: The last of the Bootstrap-4-only patterns — Custom Form Controls, the .custom-* classes that restyle checkboxes, radios, selects, and file inputs.