Bootstrap Media - Complete Guide with Examples

Modern flexbox-based media patterns for feeds, comments, products, and profiles.

Introduction

Bootstrap Media components help you build complex, repetitive content layouts like blog comments, tweets, social media posts, product listings, and user profiles. While Bootstrap 4 had a dedicated Media object, Bootstrap 5 encourages using flexbox utilities to create media layouts with more flexibility and control. This guide covers both traditional media object patterns and modern flexbox-based approaches.

1. Basic Media Object (Flexbox Approach)

The media object pattern consists of a media element (image, video, icon) on one side and descriptive content on the other.

Basic Media with Image Left

<div class="d-flex gap-3">
  <div class="flex-shrink-0">
    <img src="avatar.jpg" width="64" height="64" class="rounded-circle" alt="Avatar">
  </div>
  <div>
    <h5 class="mt-0">Media heading</h5>
    <p>This is the content area next to the media. The flexbox layout keeps the image fixed while the content expands.</p>
  </div>
</div>

Media with Image Right

<div class="d-flex gap-3">
  <div>
    <h5 class="mt-0">Media heading</h5>
    <p>Content appears on the left side with the image on the right.</p>
  </div>
  <div class="flex-shrink-0">
    <img src="avatar.jpg" width="64" height="64" class="rounded-circle" alt="Avatar">
  </div>
</div>

Media with Image Top

<div class="text-center" style="width: 200px;">
  <img src="avatar.jpg" width="150" height="150" class="rounded-circle mb-2" alt="Avatar">
  <h5>John Doe</h5>
  <p class="text-muted">User description goes here.</p>
</div>

2. Media with Different Sizes

Control media element sizes using width, height, or Bootstrap sizing utilities.

Small Media Image

<div class="d-flex gap-2 align-items-center">
  <div class="flex-shrink-0">
    <img src="avatar.jpg" width="32" height="32" class="rounded-circle" alt="Small avatar">
  </div>
  <div>
    <small class="text-muted">Small media object</small>
    <p class="mb-0">Compact media layout.</p>
  </div>
</div>

Large Media Image

<div class="d-flex gap-4">
  <div class="flex-shrink-0">
    <img src="product.jpg" width="120" height="120" class="rounded" alt="Product image">
  </div>
  <div>
    <h3>Product Title</h3>
    <p>Detailed product description goes here with large media element.</p>
    <button class="btn btn-primary btn-sm">View Details</button>
  </div>
</div>

Responsive Media Image

<div class="d-flex flex-column flex-sm-row gap-3">
  <div class="flex-shrink-0 text-center text-sm-start">
    <img src="profile.jpg" width="80" height="80" class="rounded-circle" alt="Profile">
  </div>
  <div>
    <h5>Responsive Media</h5>
    <p>On mobile, the image stacks above the content. On larger screens, it sits to the side.</p>
  </div>
</div>

3. Media Alignment

Control vertical alignment of media elements relative to content.

Top Alignment (Default)

<div class="d-flex gap-3">
  <div class="flex-shrink-0">
    <img src="avatar.jpg" width="64" height="64" class="rounded" alt="Image">
  </div>
  <div>
    <h5>Top Aligned Media</h5>
    <p>This content starts at the top of the media element. This is the default flexbox behavior.</p>
    <p>Additional paragraph to show alignment.</p>
  </div>
</div>

Center Alignment (Vertical Middle)

<div class="d-flex gap-3 align-items-center">
  <div class="flex-shrink-0">
    <img src="avatar.jpg" width="64" height="64" class="rounded" alt="Image">
  </div>
  <div>
    <h5>Center Aligned Media</h5>
    <p>The media element is vertically centered relative to the content.</p>
  </div>
</div>

Bottom Alignment

<div class="d-flex gap-3 align-items-end">
  <div class="flex-shrink-0">
    <img src="avatar.jpg" width="64" height="64" class="rounded" alt="Image">
  </div>
  <div>
    <h5>Bottom Aligned Media</h5>
    <p>The media element aligns to the bottom of the content area.</p>
  </div>
</div>

4. Nested Media (Comments Thread)

Create threaded conversations by nesting media objects inside other media objects.

Nested Comments

<div class="d-flex gap-3">
  <div class="flex-shrink-0">
    <img src="user1.jpg" width="50" height="50" class="rounded-circle" alt="User 1">
  </div>
  <div>
    <h6 class="mb-1">John Doe <small class="text-muted">· 2 hours ago</small></h6>
    <p>This is the parent comment.</p>
    
    <!-- Nested comment 1 -->
    <div class="d-flex gap-3 mt-3">
      <div class="flex-shrink-0">
        <img src="user2.jpg" width="40" height="40" class="rounded-circle" alt="User 2">
      </div>
      <div>
        <h6 class="mb-1">Jane Smith <small class="text-muted">· 1 hour ago</small></h6>
        <p>This is a reply to the parent comment.</p>
        
        <!-- Nested comment 2 (deeper level) -->
        <div class="d-flex gap-3 mt-3">
          <div class="flex-shrink-0">
            <img src="user3.jpg" width="40" height="40" class="rounded-circle" alt="User 3">
          </div>
          <div>
            <h6 class="mb-1">Mike Johnson <small class="text-muted">· 30 minutes ago</small></h6>
            <p>Deep nested reply in the conversation thread.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Comment with Actions

<div class="d-flex gap-3 border-bottom pb-3 mb-3">
  <div class="flex-shrink-0">
    <img src="avatar.jpg" width="48" height="48" class="rounded-circle" alt="Avatar">
  </div>
  <div class="flex-grow-1">
    <div class="d-flex justify-content-between align-items-center">
      <h6 class="mb-0">Sarah Williams</h6>
      <small class="text-muted">3 days ago</small>
    </div>
    <p class="mt-2 mb-2">Great article! Thanks for sharing this information.</p>
    <div class="d-flex gap-3">
      <a href="#" class="text-decoration-none small">👍 Like</a>
      <a href="#" class="text-decoration-none small">💬 Reply</a>
      <a href="#" class="text-decoration-none small">🔗 Share</a>
    </div>
  </div>
</div>

5. Media List (Multiple Media Items)

Create lists of media objects for feeds, timelines, or message threads.

Basic Media List

<div class="list-group">
  <div class="list-group-item d-flex gap-3">
    <img src="avatar1.jpg" width="48" height="48" class="rounded-circle" alt="User">
    <div>
      <h6 class="mb-1">Alex Morgan</h6>
      <p class="mb-1">Posted a new update about the project.</p>
      <small class="text-muted">5 minutes ago</small>
    </div>
  </div>
  
  <div class="list-group-item d-flex gap-3">
    <img src="avatar2.jpg" width="48" height="48" class="rounded-circle" alt="User">
    <div>
      <h6 class="mb-1">Taylor Swift</h6>
      <p class="mb-1">Shared a link to the documentation.</p>
      <small class="text-muted">1 hour ago</small>
    </div>
  </div>
  
  <div class="list-group-item d-flex gap-3">
    <img src="avatar3.jpg" width="48" height="48" class="rounded-circle" alt="User">
    <div>
      <h6 class="mb-1">Chris Evans</h6>
      <p class="mb-1">Commented on your post.</p>
      <small class="text-muted">Yesterday</small>
    </div>
  </div>
</div>

Message Thread List

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action d-flex gap-3">
    <div class="flex-shrink-0">
      <img src="contact1.jpg" width="56" height="56" class="rounded-circle" alt="Contact">
    </div>
    <div class="flex-grow-1">
      <div class="d-flex justify-content-between">
        <h6 class="mb-0">Emily Watson</h6>
        <small class="text-muted">10:42 AM</small>
      </div>
      <p class="mb-1 small text-muted">Hey! Are we still meeting today?</p>
      <span class="badge bg-primary rounded-pill">2</span>
    </div>
  </a>
  
  <a href="#" class="list-group-item list-group-item-action d-flex gap-3">
    <div class="flex-shrink-0">
      <img src="contact2.jpg" width="56" height="56" class="rounded-circle" alt="Contact">
    </div>
    <div class="flex-grow-1">
      <div class="d-flex justify-content-between">
        <h6 class="mb-0">David Chen</h6>
        <small class="text-muted">Yesterday</small>
      </div>
      <p class="mb-1 small text-muted">I sent you the files. Let me know.</p>
    </div>
  </a>
</div>

6. Media with Badges and Indicators

User with Online Status Indicator

<div class="d-flex gap-3 align-items-center">
  <div class="position-relative">
    <img src="avatar.jpg" width="48" height="48" class="rounded-circle" alt="User">
    <span class="position-absolute bottom-0 end-0 translate-middle p-1 bg-success border border-light rounded-circle">
      <span class="visually-hidden">Online</span>
    </span>
  </div>
  <div>
    <h6 class="mb-0">Online User</h6>
    <small class="text-success">Active now</small>
  </div>
</div>

Media with Notification Badge

<div class="d-flex gap-3 align-items-center">
  <div class="flex-shrink-0 position-relative">
    <img src="avatar.jpg" width="56" height="56" class="rounded-circle" alt="User">
    <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
      3
    </span>
  </div>
  <div>
    <h6 class="mb-0">Notifications</h6>
    <small class="text-muted">3 unread messages</small>
  </div>
</div>

Media with Role Badge

<div class="d-flex gap-3">
  <img src="avatar.jpg" width="60" height="60" class="rounded-circle" alt="Admin">
  <div>
    <h5 class="mb-1">Admin User <span class="badge bg-primary ms-2">Administrator</span></h5>
    <p class="text-muted mb-0">Joined January 2024</p>
  </div>
</div>

7. Media with Forms and Inputs

Comment Form with Avatar

<div class="d-flex gap-3">
  <div class="flex-shrink-0">
    <img src="avatar.jpg" width="48" height="48" class="rounded-circle" alt="Your avatar">
  </div>
  <div class="flex-grow-1">
    <textarea class="form-control" rows="2" placeholder="Write a comment..."></textarea>
    <div class="d-flex justify-content-end mt-2">
      <button class="btn btn-primary btn-sm">Post Comment</button>
    </div>
  </div>
</div>

Reply Form in Nested Media

<div class="d-flex gap-3">
  <div class="flex-shrink-0">
    <img src="user.jpg" width="40" height="40" class="rounded-circle" alt="User">
  </div>
  <div class="flex-grow-1">
    <h6 class="mb-1">Original Commenter</h6>
    <p>This is the original comment content.</p>
    
    <!-- Reply form -->
    <div class="d-flex gap-3 mt-3">
      <div class="flex-shrink-0">
        <img src="your-avatar.jpg" width="32" height="32" class="rounded-circle" alt="Your avatar">
      </div>
      <div class="flex-grow-1">
        <input type="text" class="form-control form-control-sm" placeholder="Write a reply...">
      </div>
    </div>
  </div>
</div>

8. Card-Based Media (Alternative Approach)

Combine Bootstrap Cards with media patterns for richer content.

Horizontal Card (Media Card)

<div class="card mb-3" style="max-width: 540px;">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="image.jpg" class="img-fluid rounded-start h-100 object-fit-cover" alt="Card image">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">Horizontal Card</h5>
        <p class="card-text">This is a wider card with supporting text below.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>
</div>

Media with Card Overlay

<div class="card" style="width: 300px;">
  <img src="cover.jpg" class="card-img-top" alt="Cover image">
  <div class="card-body">
    <div class="d-flex gap-3 align-items-center">
      <img src="avatar.jpg" width="48" height="48" class="rounded-circle" alt="Avatar">
      <div>
        <h6 class="card-title mb-0">Username</h6>
        <small class="text-muted">@username</small>
      </div>
    </div>
    <p class="card-text mt-3">Some quick example text to build on the card.</p>
  </div>
</div>

9. Social Media Post Examples

Twitter-style Post

<div class="d-flex gap-3 p-3 border-bottom">
  <div class="flex-shrink-0">
    <img src="avatar.jpg" width="48" height="48" class="rounded-circle" alt="Avatar">
  </div>
  <div class="flex-grow-1">
    <div class="d-flex justify-content-between">
      <div>
        <strong>John Doe</strong>
        <span class="text-muted ms-1">@johndoe · 2h</span>
      </div>
      <a href="#" class="text-muted">⋯</a>
    </div>
    <p class="mt-2 mb-2">Just launched my new website built with Bootstrap! 🚀 Check it out and let me know what you think.</p>
    <img src="screenshot.jpg" class="img-fluid rounded mt-2 mb-2" alt="Post image">
    <div class="d-flex gap-4 mt-2 text-muted">
      <a href="#" class="text-decoration-none text-muted">💬 12</a>
      <a href="#" class="text-decoration-none text-muted">🔄 5</a>
      <a href="#" class="text-decoration-none text-muted">❤️ 47</a>
      <a href="#" class="text-decoration-none text-muted">🔗 Share</a>
    </div>
  </div>
</div>

Facebook-style Post

<div class="card mb-3">
  <div class="card-body">
    <div class="d-flex gap-3">
      <img src="avatar.jpg" width="56" height="56" class="rounded-circle" alt="Profile">
      <div>
        <h6 class="card-subtitle mb-0">Alex Johnson</h6>
        <small class="text-muted">Shared publicly · 1 hour ago</small>
      </div>
    </div>
    <p class="card-text mt-3">Had an amazing time at the conference today! Learned so much about web development.</p>
    <img src="conference.jpg" class="img-fluid rounded mt-2" alt="Post image">
    <div class="d-flex justify-content-between mt-3 pt-2 border-top">
      <a href="#" class="btn btn-sm btn-outline-secondary flex-grow-1 me-1">👍 Like</a>
      <a href="#" class="btn btn-sm btn-outline-secondary flex-grow-1 me-1">💬 Comment</a>
      <a href="#" class="btn btn-sm btn-outline-secondary flex-grow-1">🔗 Share</a>
    </div>
  </div>
</div>

Instagram-style Post

<div class="card" style="max-width: 400px;">
  <div class="card-header bg-white border-0">
    <div class="d-flex gap-2 align-items-center">
      <img src="avatar.jpg" width="40" height="40" class="rounded-circle" alt="Profile">
      <div>
        <strong>travel_adventures</strong>
        <div class="small text-muted">Location, Italy</div>
      </div>
    </div>
  </div>
  <img src="post.jpg" class="card-img-top" alt="Post">
  <div class="card-body">
    <div class="d-flex gap-3 mb-2">
      <a href="#" class="text-decoration-none text-dark">❤️</a>
      <a href="#" class="text-decoration-none text-dark">💬</a>
      <a href="#" class="text-decoration-none text-dark">📤</a>
    </div>
    <div><strong>1,234 likes</strong></div>
    <p class="mt-2 mb-1"><strong>travel_adventures</strong> Beautiful sunset view! 🌅</p>
    <small class="text-muted">View all 45 comments</small>
    <div class="mt-2">
      <input type="text" class="form-control form-control-sm" placeholder="Add a comment...">
    </div>
  </div>
</div>

10. Product Listing with Media

Create product listings using media object patterns.

Simple Product Listing

<div class="d-flex gap-3 border-bottom pb-3 mb-3">
  <div class="flex-shrink-0">
    <img src="product1.jpg" width="80" height="80" class="rounded" alt="Product">
  </div>
  <div class="flex-grow-1">
    <div class="d-flex justify-content-between">
      <h6 class="mb-0">Wireless Headphones</h6>
      <strong>$49.99</strong>
    </div>
    <p class="small text-muted mb-1">Noise cancelling, 20hr battery life</p>
    <div class="d-flex gap-2">
      <button class="btn btn-sm btn-outline-primary">Edit</button>
      <button class="btn btn-sm btn-outline-danger">Remove</button>
    </div>
  </div>
</div>

Product Grid with Media Cards

<div class="row g-4">
  <div class="col-md-4">
    <div class="card h-100">
      <img src="product1.jpg" class="card-img-top" alt="Product">
      <div class="card-body">
        <div class="d-flex gap-2 mb-2">
          <img src="brand-logo.jpg" width="24" height="24" class="rounded-circle" alt="Brand">
          <small class="text-muted">Brand Name</small>
        </div>
        <h6 class="card-title">Product Title</h6>
        <p class="card-text small">Short product description.</p>
        <div class="d-flex justify-content-between align-items-center">
          <span class="h5 mb-0">$29.99</span>
          <button class="btn btn-sm btn-primary">Buy Now</button>
        </div>
      </div>
    </div>
  </div>
</div>

Shopping Cart Item

<div class="d-flex gap-3 align-items-center p-3 bg-light rounded">
  <div class="flex-shrink-0">
    <img src="product.jpg" width="70" height="70" class="rounded" alt="Product">
  </div>
  <div class="flex-grow-1">
    <h6 class="mb-1">Product Name</h6>
    <small class="text-muted">Color: Black | Size: M</small>
  </div>
  <div class="text-end">
    <div>$59.99</div>
    <small class="text-muted">Qty: 1</small>
  </div>
  <a href="#" class="text-danger">🗑️</a>
</div>

11. Media with Videos and Other Content

Media objects can contain videos, GIFs, or any other media type.

Video with Description

<div class="d-flex gap-3">
  <div class="flex-shrink-0">
    <video width="160" height="90" controls class="rounded">
      <source src="video.mp4" type="video/mp4">
    </video>
  </div>
  <div>
    <h6>Video Tutorial Title</h6>
    <p class="small text-muted">Learn how to use Bootstrap media components.</p>
    <span class="badge bg-secondary">12:34</span>
  </div>
</div>

YouTube Thumbnail with Info

<div class="d-flex gap-3">
  <div class="flex-shrink-0 position-relative">
    <img src="thumbnail.jpg" width="168" height="94" class="rounded" alt="Video thumbnail">
    <span class="position-absolute bottom-0 end-0 bg-dark text-white px-1 small rounded m-1">10:25</span>
  </div>
  <div>
    <h6 class="mb-1">Bootstrap 5 Tutorial - Media Components</h6>
    <small class="text-muted">Channel Name</small>
    <div class="small text-muted">1.2M views • 3 days ago</div>
  </div>
</div>

12. Team Members / User Profiles

Display team members or user profiles using media patterns.

Team Member Card

<div class="d-flex gap-4 align-items-center">
  <img src="team1.jpg" width="100" height="100" class="rounded-circle" alt="Team member">
  <div>
    <h5 class="mb-1">Jane Doe</h5>
    <p class="text-primary mb-1">Lead Developer</p>
    <p class="small text-muted">5+ years experience in full-stack development.</p>
    <div class="d-flex gap-2">
      <a href="#" class="btn btn-sm btn-outline-secondary">Twitter</a>
      <a href="#" class="btn btn-sm btn-outline-secondary">LinkedIn</a>
    </div>
  </div>
</div>

Team Grid with Media

<div class="row g-4">
  <div class="col-md-6">
    <div class="d-flex gap-3">
      <img src="member1.jpg" width="80" height="80" class="rounded-circle" alt="Member">
      <div>
        <h6 class="mb-0">Michael Brown</h6>
        <small class="text-primary">UI/UX Designer</small>
        <p class="small mt-2">Creates beautiful user interfaces.</p>
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="d-flex gap-3">
      <img src="member2.jpg" width="80" height="80" class="rounded-circle" alt="Member">
      <div>
        <h6 class="mb-0">Sarah Lee</h6>
        <small class="text-primary">Backend Developer</small>
        <p class="small mt-2">API and database specialist.</p>
      </div>
    </div>
  </div>
</div>

13. Notification List

Create notification feeds with media objects.

Notification Items

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action d-flex gap-3">
    <div class="flex-shrink-0">
      <i class="bi bi-heart-fill text-danger fs-4"></i>
    </div>
    <div>
      <p class="mb-1"><strong>@user123</strong> liked your post</p>
      <small class="text-muted">2 minutes ago</small>
    </div>
  </a>
  
  <a href="#" class="list-group-item list-group-item-action d-flex gap-3">
    <div class="flex-shrink-0">
      <i class="bi bi-chat-fill text-primary fs-4"></i>
    </div>
    <div>
      <p class="mb-1"><strong>@friend</strong> commented: "Great work!"</p>
      <small class="text-muted">1 hour ago</small>
    </div>
  </a>
  
  <a href="#" class="list-group-item list-group-item-action d-flex gap-3">
    <div class="flex-shrink-0">
      <i class="bi bi-person-plus-fill text-success fs-4"></i>
    </div>
    <div>
      <p class="mb-1"><strong>@newuser</strong> started following you</p>
      <small class="text-muted">Yesterday</small>
    </div>
  </a>
</div>

14. Responsive Media Stacking

Control how media objects behave on different screen sizes.

Stack on Mobile, Side-by-Side on Desktop

<div class="d-flex flex-column flex-md-row gap-4">
  <div class="text-center text-md-start">
    <img src="avatar.jpg" width="100" height="100" class="rounded-circle" alt="Avatar">
  </div>
  <div>
    <h5>Responsive Media</h5>
    <p>On mobile screens, the image stacks above the content. On medium screens and up, it sits to the left.</p>
  </div>
</div>

Reverse Order on Mobile

<div class="d-flex flex-column-reverse flex-md-row gap-4">
  <div>
    <h5>Content First</h5>
    <p>On mobile, content appears below the image. On desktop, content is on the left.</p>
  </div>
  <div class="text-center text-md-end">
    <img src="avatar.jpg" width="100" height="100" class="rounded-circle" alt="Avatar">
  </div>
</div>

15. Complete Real-World Examples

Blog Comments Section

<section class="mt-5">
  <h4 class="mb-4">Comments (3)</h4>
  
  <!-- Parent comment -->
  <div class="d-flex gap-3 mb-4">
    <div class="flex-shrink-0">
      <img src="commenter1.jpg" width="50" height="50" class="rounded-circle" alt="Commenter">
    </div>
    <div class="flex-grow-1">
      <div class="d-flex justify-content-between">
        <div>
          <strong>Emma Watson</strong>
          <span class="text-muted ms-2 small">December 15, 2024</span>
        </div>
        <a href="#" class="small text-decoration-none">Reply</a>
      </div>
      <p class="mt-2">This is an excellent tutorial! Very helpful for my project.</p>
      
      <!-- Nested reply 1 -->
      <div class="d-flex gap-3 mt-3">
        <div class="flex-shrink-0">
          <img src="commenter2.jpg" width="40" height="40" class="rounded-circle" alt="Replier">
        </div>
        <div class="flex-grow-1">
          <div class="d-flex justify-content-between">
            <div>
              <strong>Admin</strong>
              <span class="text-muted ms-2 small">December 15, 2024</span>
            </div>
            <a href="#" class="small text-decoration-none">Reply</a>
          </div>
          <p class="mt-2">Thanks Emma! Glad you found it useful.</p>
        </div>
      </div>
    </div>
  </div>
  
  <!-- Another parent comment -->
  <div class="d-flex gap-3 mb-4">
    <div class="flex-shrink-0">
      <img src="commenter3.jpg" width="50" height="50" class="rounded-circle" alt="Commenter">
    </div>
    <div class="flex-grow-1">
      <div class="d-flex justify-content-between">
        <div>
          <strong>Mike Ross</strong>
          <span class="text-muted ms-2 small">December 14, 2024</span>
        </div>
        <a href="#" class="small text-decoration-none">Reply</a>
      </div>
      <p class="mt-2">Could you add more examples of nested comments? Thanks!</p>
    </div>
  </div>
  
  <!-- Comment form -->
  <div class="d-flex gap-3 mt-4 pt-3 border-top">
    <div class="flex-shrink-0">
      <img src="your-avatar.jpg" width="50" height="50" class="rounded-circle" alt="Your avatar">
    </div>
    <div class="flex-grow-1">
      <textarea class="form-control" rows="2" placeholder="Add a comment..."></textarea>
      <button class="btn btn-primary btn-sm mt-2">Post Comment</button>
    </div>
  </div>
</section>

Friend Request List

<div class="card">
  <div class="card-header bg-primary text-white">
    <h6 class="mb-0">Friend Requests (3)</h6>
  </div>
  <div class="list-group list-group-flush">
    <div class="list-group-item d-flex gap-3 align-items-center">
      <img src="request1.jpg" width="48" height="48" class="rounded-circle" alt="User">
      <div class="flex-grow-1">
        <h6 class="mb-0">Jessica Parker</h6>
        <small class="text-muted">2 mutual friends</small>
      </div>
      <div>
        <button class="btn btn-sm btn-success me-1">✓</button>
        <button class="btn btn-sm btn-danger">✗</button>
      </div>
    </div>
    <div class="list-group-item d-flex gap-3 align-items-center">
      <img src="request2.jpg" width="48" height="48" class="rounded-circle" alt="User">
      <div class="flex-grow-1">
        <h6 class="mb-0">Daniel Kim</h6>
        <small class="text-muted">1 mutual friend</small>
      </div>
      <div>
        <button class="btn btn-sm btn-success me-1">✓</button>
        <button class="btn btn-sm btn-danger">✗</button>
      </div>
    </div>
  </div>
</div>

Inbox Message List

<div class="card">
  <div class="card-header">
    <h6 class="mb-0">Inbox</h6>
  </div>
  <div class="list-group list-group-flush">
    <a href="#" class="list-group-item list-group-item-action d-flex gap-3">
      <div class="flex-shrink-0">
        <img src="sender1.jpg" width="44" height="44" class="rounded-circle" alt="Sender">
      </div>
      <div class="flex-grow-1">
        <div class="d-flex justify-content-between">
          <strong>Lisa Anderson</strong>
          <small class="text-muted">10:30 AM</small>
        </div>
        <div class="small">Meeting tomorrow at 2pm?</div>
        <small class="text-muted">Re: Project discussion</small>
      </div>
      <div class="flex-shrink-0">
        <span class="badge bg-primary rounded-pill">2</span>
      </div>
    </a>
    
    <a href="#" class="list-group-item list-group-item-action d-flex gap-3">
      <div class="flex-shrink-0">
        <img src="sender2.jpg" width="44" height="44" class="rounded-circle" alt="Sender">
      </div>
      <div class="flex-grow-1">
        <div class="d-flex justify-content-between">
          <strong>Support Team</strong>
          <small class="text-muted">Yesterday</small>
        </div>
        <div class="small">Your ticket has been resolved</div>
        <small class="text-muted">Ticket #12345</small>
      </div>
    </a>
  </div>
</div>

Quick Reference Summary

Pattern	Classes / Utilities
Container	`.d-flex`
Fixed-width media	`.flex-shrink-0`
Flexible content	`.flex-grow-1` (or no class)
Gap between media and content	`.gap-1` to `.gap-5`
Vertical alignment	`.align-items-start` (default), `.align-items-center`, `.align-items-end`
Stacking direction	`.flex-column`, `.flex-row`
Responsive stacking	`.flex-column flex-md-row`
Reverse stacking	`.flex-column-reverse`, `.flex-row-reverse`
Media size control	width and height attributes, Bootstrap sizing utilities
Nested media	Add another `.d-flex` inside the content area
List media	`.list-group`, `.list-group-item` with `.d-flex`
Card media	`.card`, `.card-body` with `.d-flex`

Conclusion

Bootstrap Media components (using flexbox utilities) provide a flexible, powerful way to build content layouts with images, videos, or icons alongside descriptive text. From simple two-column layouts to complex nested comment threads, social media posts, product listings, and notification feeds, the media pattern is essential for modern web design. By mastering these flexbox-based media patterns, you can create consistent, responsive, and visually appealing content layouts without writing custom CSS.