Bootstrap Media Objects

21 April 2025 | Category: Bootstrap

Bootstrap Tutorial: Create Media Objects

In this Bootstrap tutorial, you’ll learn how to create Media Objects using Bootstrap’s flexbox utilities to display images alongside text, perfect for comments, articles, or profiles. We’ll use vibrant images for a lively look.

What You’ll Learn

Creating a basic media object
Aligning media with top, middle, or bottom
Nesting media objects
Combining media objects with images

Prerequisites

Basic knowledge of HTML
A text editor (e.g., VS Code, Notepad)
A web browser (e.g., Chrome, Firefox)

Step 1: Understand Bootstrap Media Objects

In Bootstrap 3, Media Objects used the media class to pair an image with content. In Bootstrap 5, you can recreate this using d-flex and alignment classes (e.g., align-items-start) to place an image beside text, ideal for user comments or news feeds.

Assume Bootstrap CSS is included in your project (we’ll skip the <link> tag as requested).

Step 2: Create a Basic Media Object

Start with a simple media object with an image and text. Use this code:

<div class="container">
    <h3>Basic Media Object</h3>
    <div class="d-flex align-items-start">
        <img src="https://placehold.co/64x64/28a745/ffffff" class="me-3 rounded" alt="Green placeholder">
        <div>
            <h4>User Name</h4>
            <p>This is a sample comment or description.</p>
        </div>
    </div>
</div>

Explanation:

container: Centers and constrains content.
d-flex align-items-start: Creates a flex container with top-aligned items.
img with me-3: Adds a 64×64 green image with margin-end (right) spacing.
rounded: Rounds the image corners.
div: Contains the text content (heading and paragraph).

This pairs an image with text, like a comment.

Step 3: Align Media Differently

Adjust image alignment (top, middle, bottom) using flex classes. Try this:

<div class="container">
    <h3>Media Alignment</h3>
    <div class="d-flex align-items-center mb-3">
        <img src="https://placehold.co/64x64/007bff/ffffff" class="me-3 rounded" alt="Blue placeholder">
        <div>
            <h4>Profile</h4>
            <p>Centered image with text for a balanced look.</p>
        </div>
    </div>
    <div class="d-flex align-items-end">
        <img src="https://placehold.co/64x64/ffc107/ffffff" class="me-3 rounded" alt="Yellow placeholder">
        <div>
            <h4>Article</h4>
            <p>Bottom-aligned image for a different style.</p>
        </div>
    </div>
</div>

Explanation:

align-items-center: Centers the image vertically with the text.
align-items-end: Aligns the image to the bottom.
me-3: Adds spacing between image and text.
mb-3: Spaces the two media objects.
Uses blue and yellow 64×64 images for variety.

This shows flexible alignment options.

Step 4: Nest Media Objects

Create nested media objects for threaded comments. Add this:

<div class="container">
    <h3>Nested Media Objects</h3>
    <div class="d-flex align-items-start">
        <img src="https://placehold.co/64x64/28a745/ffffff" class="me-3 rounded" alt="Green placeholder">
        <div>
            <h4>Parent Comment</h4>
            <p>This is the main comment.</p>
            <div class="d-flex align-items-start ms-4 mt-2">
                <img src="https://placehold.co/48x48/007bff/ffffff" class="me-3 rounded" alt="Blue placeholder">
                <div>
                    <h5>Reply</h5>
                    <p>This is a nested reply.</p>
                </div>
            </div>
        </div>
    </div>
</div>

Explanation:

Outer d-flex: Creates the parent media object (64×64 green image).
Inner d-flex ms-4 mt-2: Nests a reply (48×48 blue image) with margin-start (indent) and margin-top.
h5: Smaller heading for the nested comment.
rounded: Keeps images circular.

This mimics a threaded comment structure.

Step 5: Combine with an Image

Pair a media object with a larger dummy image for context. Try this:

<div class="container">
    <div class="row">
        <div class="col-8">
            <h3>User Review</h3>
            <p>Read user feedback.</p>
            <div class="d-flex align-items-start">
                <img src="https://placehold.co/64x64/28a745/ffffff" class="me-3 rounded" alt="Green placeholder">
                <div>
                    <h4>Jane Doe</h4>
                    <p>Great product, highly recommend!</p>
                </div>
            </div>
        </div>
        <div class="col-4">
            <img src="https://placehold.co/200x150/28a745/ffffff" class="img-fluid rounded" alt="Green placeholder">
        </div>
    </div>
</div>

Explanation:

row and col-8, col-4: Splits content into media object (8 units) and image (4 units).
d-flex align-items-start: Creates a media object with a 64×64 green image.
Larger 200×150 green image adds context (e.g., product image).
img-fluid rounded: Ensures the larger image is responsive with rounded corners.

The larger image enhances the review context.

Final Code

Here’s a combined example with varied media objects and an image:

<div class="container">
    <div class="row mb-3">
        <div class="col-12">
            <h3>Simple Media Object</h3>
            <div class="d-flex align-items-start">
                <img src="https://placehold.co/64x64/007bff/ffffff" class="me-3 rounded" alt="Blue placeholder">
                <div>
                    <h4>News Item</h4>
                    <p>Summary of the latest news.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="row mb-3">
        <div class="col-12">
            <h3>Nested Media</h3>
            <div class="d-flex align-items-start">
                <img src="https://placehold.co/64x64/28a745/ffffff" class="me-3 rounded" alt="Green placeholder">
                <div>
                    <h4>Main Post</h4>
                    <p>This is the main content.</p>
                    <div class="d-flex align-items-start ms-4 mt-2">
                        <img src="https://placehold.co/48x48/ffc107/ffffff" class="me-3 rounded" alt="Yellow placeholder">
                        <div>
                            <h5>Comment</h5>
                            <p>A reply to the post.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-7">
            <h3>Profile Card</h3>
            <p>View user info.</p>
            <div class="d-flex align-items-center">
                <img src="https://placehold.co/64x64/007bff/ffffff" class="me-3 rounded" alt="Blue placeholder">
                <div>
                    <h4>John Smith</h4>
                    <p>Software developer, loves coding.</p>
                </div>
            </div>
        </div>
        <div class="col-5">
            <img src="https://placehold.co/250x150/ff6b6b/ffffff" class="img-fluid rounded" alt="Red placeholder">
        </div>
    </div>
</div>

Output

Your webpage should show:

A simple media object with a blue 64×64 image and text.
A nested media object with a green 64×64 image and a yellow 48×48 reply image.
A profile card media object (centered blue 64×64 image) with a red 250×150 image beside it.
All media objects are responsive, adjusting for mobile, with colorful images for a vibrant look.

Next Steps

Check the Bootstrap Flex Docs for more flexbox options.
Try order-* classes to reorder image and text.
Combine with Bootstrap Cards for structured layouts.

Conclusion

You’ve mastered Bootstrap Media Objects! With classes like d-flex, align-items-start, and me-3, plus striking images, you’ve created stylish image-text pairings. Keep experimenting to enhance your webpages.