How to use the Bootstrap media object for comments

Bootstrap 5 使用 flex 工具类替代了旧的 .media 类来创建评论布局，具体方法如下：1. 使用 d-flex、gap-3 和 rounded-circle 构建基础评论结构；2. 通过 ps-4 和 border-start 实现嵌套回复的缩进与视觉连接；3. 利用 d-flex 与 justify-content-between 添加时间戳和操作链接；4. 将多个评论组件组合在容器中形成完整评论列表，该方案默认响应式且易于定制。

The Bootstrap media object is a flexible and reusable component designed to display comment-like structures — like user comments, blog replies, or any content where an image (usually an avatar) is aligned to the side of text content. Although the dedicated .media class was removed in Bootstrap 5, the same layout can be easily achieved using utility classes like d-flex, align-items-start, and gap.

Here’s how to use the modern Bootstrap approach to build a comment section.

1. Basic Comment Structure Using Flex Utilities

Bootstrap 5 replaced the old .media and .media-body classes with flex utilities. You’ll use d-flex, align-items-start, and gap to create the same effect.

<div class="d-flex gap-3">
  <img class="rounded-circle lazy"  src="/static/imghw/default1.png"  data-src="avatar.jpg"  alt="How to use the Bootstrap media object for comments"    style="max-width:90%"  style="max-width:90%">
  <div>
    <h6 class="mb-1">John Doe</h6>
    <p class="mb-0">This is a great article! Thanks for sharing your insights.</p>
  </div>
</div>

Key points:

• d-flex: Makes the container a flexbox.
• gap-3: Adds space between the image and text (you can adjust the gap size: gap-2, gap-4, etc.).
• rounded-circle: Makes the image circular (common for avatars).
• The text is wrapped in a <div> to group the name and comment.

2. Nested Comments (Replies)

Comments often have replies. You can nest additional comment blocks inside a parent with proper indentation using padding.

<div class="d-flex gap-3">
  <img class="rounded-circle lazy"  src="/static/imghw/default1.png"  data-src="avatar1.jpg"     style="max-width:90%"  style="max-width:90%" alt="How to use the Bootstrap media object for comments 1">
  <div>
    <h6 class="mb-1">Alice</h6>
    <p class="mb-1">Nice post! I learned a lot.</p>

    <!-- Nested Reply -->
    <div class="d-flex gap-3 mt-3 ps-4 border-start">
      <img class="rounded-circle lazy"  src="/static/imghw/default1.png"  data-src="avatar2.jpg"     style="max-width:90%"  style="max-width:90%" alt="How to use the Bootstrap media object for comments 2">
      <div>
        <h6 class="mb-1">Bob</h6>
        <p class="mb-0">Totally agree with you, Alice!</p>
      </div>
    </div>
  </div>
</div>

Explanation:

• ps-4: Adds left padding (padding start) to indent the reply.
• border-start: Adds a vertical line on the left to visually connect the reply to the parent.
• mt-3: Adds margin on top to separate the reply from the parent comment.

3. Adding Timestamps and Actions

You can enhance comments by adding timestamps, edit links, or reply buttons.

<div class="d-flex gap-3">
  <img class="rounded-circle lazy"  src="/static/imghw/default1.png"  data-src="avatar.jpg"     style="max-width:90%"  style="max-width:90%" alt="How to use the Bootstrap media object for comments">
  <div>
    <div class="d-flex justify-content-between">
      <h6 class="mb-0">Jane Smith</h6>
      <small class="text-muted">2 mins ago</small>
    </div>
    <p class="mb-1">I found this tip really helpful.</p>
    <div>
      <a href="#" class="text-decoration-none me-3">Reply</a>
      <a href="#" class="text-decoration-none">Edit</a>
    </div>
  </div>
</div>

Tips:

• Use small and text-muted for subtle timestamps.
• d-flex justify-content-between aligns the name and timestamp on opposite ends.
• Add action links like "Reply" or "Edit" at the bottom with me-3 for spacing.

4. Repeating the Structure for a Full Comment List

Wrap multiple comment blocks in a container to build a full comment thread.

<div class="my-4">
  <!-- Comment 1 -->
  <div class="d-flex gap-3 mb-3">
    <img class="rounded-circle lazy"  src="/static/imghw/default1.png"  data-src="user1.jpg"     style="max-width:90%"  style="max-width:90%" alt="How to use the Bootstrap media object for comments">
    <div>
      <h6 class="mb-1">John</h6>
      <p class="mb-0">Great tutorial!</p>
    </div>
  </div>

  <!-- Comment 2 with Reply -->
  <div class="d-flex gap-3 mb-3">
    <img class="rounded-circle lazy"  src="/static/imghw/default1.png"  data-src="user2.jpg"     style="max-width:90%"  style="max-width:90%" alt="How to use the Bootstrap media object for comments">
    <div>
      <h6 class="mb-1">Sarah</h6>
      <p class="mb-1">Could you add more examples?</p>

      <div class="d-flex gap-3 mt-3 ps-4 border-start">
        <img class="rounded-circle lazy"  src="/static/imghw/default1.png"  data-src="user3.jpg"     style="max-width:90%"  style="max-width:90%" alt="Admin">
        <div>
          <h6 class="mb-1">Admin</h6>
          <p class="mb-0">Sure, more examples are coming next week.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Summary

Even though Bootstrap no longer has a .media class, creating comment layouts is still simple and flexible using:

• d-flex and gap for alignment and spacing
• rounded-circle for avatars
• ps-* and border-start for nested replies
• small and text-muted for metadata

This method is responsive by default and works well across devices.

Basically, just combine flex utilities and Bootstrap’s spacing system — it’s not complex, but easy to customize.

The above is the detailed content of How to use the Bootstrap media object for comments. For more information, please follow other related articles on the PHP Chinese website!