• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

BS4 Media Objects

← Previous Next →

What are Bootstrap 4 Media Objects?

Bootstrap 4 Media Objects are components used to create flexible and reusable content layouts that combine media (images, videos, or icons) with text. Media objects are ideal for comments, tweets, blogs, or lists of items with images. They provide a structured way to display media alongside textual content while maintaining alignment and spacing.

Bootstrap 4’s media object component is responsive, flexible, and easy to use, making it a preferred choice for building content-rich interfaces.

Basic Structure of a Media Object

The basic media object uses the .media class:

<div class="media">
  <img src="avatar.jpg" class="mr-3" alt="User Avatar" width="64">
  <div class="media-body">
    <h5 class="mt-0">Alice</h5>
    This is a simple comment or message content aligned next to the image.
  </div>
</div>

  • .media is the container for the media object.

  • .media-body contains textual content.

  • .mr-3 adds a margin to the right of the media for spacing.

  • Images, videos, or icons can be used as the media element.

Nesting Media Objects

Media objects can be nested to create threaded content, such as replies or sub-comments:

<div class="media">
  <img src="avatar1.jpg" class="mr-3" alt="User Avatar" width="64">
  <div class="media-body">
    <h5 class="mt-0">Maria</h5>
    This is a main comment.
    <div class="media mt-3">
      <img src="avatar2.jpg" class="mr-3" alt="User Avatar" width="64">
      <div class="media-body">
        <h5 class="mt-0">Jessica</h5>
        This is a nested reply to the main comment.
      </div>
    </div>
  </div>
</div>

  • Nested media objects allow hierarchical display of content.

  • Each nested .media can include its own image and body content.

  • Useful for comments, forum threads, and discussion boards.

Aligning Media Objects

Media objects can be aligned vertically using utility classes:

<div class="media">
  <img src="avatar.jpg" class="align-self-start mr-3" alt="Start" width="64">
  <div class="media-body">
    <h5 class="mt-0">Emma</h5>
    Start-aligned media object.
  </div>
</div>

<div class="media">
  <img src="avatar.jpg" class="align-self-center mr-3" alt="Center" width="64">
  <div class="media-body">
    <h5 class="mt-0">Sophia</h5>
    Center-aligned media object.
  </div>
</div>

<div class="media">
  <img src="avatar.jpg" class="align-self-end mr-3" alt="End" width="64">
  <div class="media-body">
    <h5 class="mt-0">Lily</h5>
    End-aligned media object.
  </div>
</div>

  • .align-self-start aligns media at the top of the content.

  • .align-self-center aligns media vertically in the middle.

  • .align-self-end aligns media at the bottom.

  • Vertical alignment helps match the media to the type and length of content.

Ordering Media Objects

You can switch the order of media and body content using .order-1 and .order-2 classes:

<div class="media">
  <div class="media-body order-2">
    <h5 class="mt-0">Content First</h5>
    Text content appears before the image.
  </div>
  <img src="avatar.jpg" class="order-1 ml-3" alt="Avatar" width="64">
</div>

  • order-1 and order-2 control the display order in flexbox.

  • Useful for design variations or right-aligned media elements.

  • Ensures media is positioned consistently across devices.

Media Objects with Lists

Media objects can be used in list groups for structured content:

<ul class="list-unstyled">
  <li class="media">
    <img src="avatar1.jpg" class="mr-3" alt="User Avatar" width="64">
    <div class="media-body">
      <h5 class="mt-0 mb-1">Alice</h5>
      List item content with media.
    </div>
  </li>
  <li class="media my-4">
    <img src="avatar2.jpg" class="mr-3" alt="User Avatar" width="64">
    <div class="media-body">
      <h5 class="mt-0 mb-1">Maria</h5>
      Another item with nested content.
    </div>
  </li>
</ul>

  • .list-unstyled removes default list styles.

  • Each .media inside the list maintains proper alignment.

  • Great for comments, reviews, or notification feeds.

Best Practices for Bootstrap 4 Media Objects

  1. Use .media and .media-body to structure content with images and text.

  2. Maintain consistent spacing using .mr-3 or .ml-3.

  3. Nest media objects carefully to avoid visual clutter.

  4. Align media properly with .align-self-start, .align-self-center, or .align-self-end.

  5. Consider accessibility, ensuring images have meaningful alt text.

  6. Use media objects in comments, lists, blogs, or profiles for consistent layout.

  7. Avoid overly large media; maintain proportion with text content.

  8. Test media objects on different devices to ensure responsiveness.

Summary of the Tutorial

This tutorial covered Bootstrap 4 Media Objects, including basic structure, nesting, alignment, ordering, and integration with lists. You learned how to combine media such as images, videos, or icons with text content in a responsive, flexible layout. Proper use of media objects helps create organized, visually appealing content sections suitable for comments, feeds, or profile listings.

Practice Questions

  1. Create a basic media object with an image on the left and text on the right.

  2. Add a second media object below the first one using the same structure.

  3. Nest a media object inside another media object to simulate a comment reply.

  4. Align a media object’s image to the top using .align-self-start.

  5. Align a media object’s image to the center using .align-self-center.

  6. Align a media object’s image to the bottom using .align-self-end.

  7. Reverse the order of image and text using .order-1 and .order-2.

  8. Create a list of three media objects inside an unstyled list (.list-unstyled).

  9. Include different media types (image, icon, or avatar) inside media objects.

  10. Add spacing between multiple media objects using Bootstrap margin utilities like .my-4.

← Previous Next →

Try a Short Quiz.

coding learning websites codepractice

No quizzes available.

Bootstrap 4

online coding class codepractice

Bootstrap Basics

Layout & Grid System

Content & Typography

Components

Forms

JavaScript Components

Utilities & Helpers

codepractice logo
Login
Go Back Top