Bootstrap Media Objects

The media objects (like images or videos) on the web page need to be aligned properly to stand out but not completely out of context.

HTML and CSS have their own features to provide required positioning to the media objects on the webpage.

Bootstrap makes it much easier for the developers to align these media objects in as per the content and webpage styling.

With Bootstrap, the media objects can be aligned to the left or to the right of the content.

Such alignments styles are useful for blog comments or tweets where the both text and pictures are displayed for multiple users.

Bootstrap Basic Media Object

Let’s have a look at a sample code for Left and right alignment of the media object.

Observer the code followed by the explanation:

<!-- Left-aligned -->
<div class="media">
    <div class="media-left">
        <img src="img_avatar1.png" class="media-object" style="width:60px">
    </div>
    <div class="media-body">
        <h4 class="media-heading">John Doe</h4>
        <p>Lorem ipsum...</p>
    </div>
</div>

<!-- Right-aligned -->
<div class="media">
    <div class="media-body">
        <h4 class="media-heading">John Doe</h4>
        <p>This is an example for the bootstrap media object alignments. The media objects can be aligned to the left or to the right of the content.</p>
    </div>
    <div class="media-right">
        <img src="img_avatar1.png" class="media-object" style="width:60px">
    </div>
</div>

</div>

<p>Lorem ipsum...</p>

</div>

<p>This is an example for the bootstrap media object alignments. The media objects can be aligned to the left or to the right of the content.</p>

</div>

</div>

Explanation

The <div> element is being used with with the .media class here. This will create a container for media objects to be used.
As for the alignment, we use the appropriate class for the required aligning direction Therefore the .media-left class will be used to align the media object (image in this case) to the left and similarly, .media-right class is there to to align it to the right.
The class= “media-body” is also used with a container in the code. This is to align the text next to the image.
Furthermore, the .media-heading can be used for the headings.

Top, Middle or Bottom Alignment

Not just horizontally, we can also set vertical alignments for the media objects.

There are basically three vertical alignments that we generally use in different containers:

Top: Media object aligned at the top corner of the content
Bottom: Media object aligned bottom corner of the text content
Middle: Media object aligned adjacent to vertically middle of the text content

In Bootstrap, these alignments can be made using respectively the classes media-top, media-bottom and media-middle.

Here’s a sample code for the vertical alignment of the media objects

<!-- Media top -->
<div class="media">
    <div class="media-left media-top">
        <img src="img_avatar1.png" class="media-object" style="width:60px">
    </div>
    <div class="media-body">
        <h4 class="media-heading">Media Top</h4>
        <p>Lorem ipsum...</p>
    </div>
</div>

<!-- Media middle -->
<div class="media">
    <div class="media-left media-middle">
        <img src="img_avatar1.png" class="media-object" style="width:60px">
    </div>
    <div class="media-body">
        <h4 class="media-heading">Media Middle</h4>
        <p>Lorem ipsum...</p>
    </div>
</div>

<!-- Media bottom -->
<div class="media">
    <div class="media-left media-bottom">
        <img src="img_avatar1.png" class="media-object" style="width:60px">
    </div>
    <div class="media-body">
        <h4 class="media-heading">Media Bottom</h4>
        <p>Lorem ipsum...</p>
    </div>
</div>

</div>

<h4 class="media-heading">Media Top</h4>

<p>Lorem ipsum...</p>

</div>

</div>

<h4 class="media-heading">Media Middle</h4>

<p>Lorem ipsum...</p>

</div>

</div>

<h4 class="media-heading">Media Bottom</h4>

<p>Lorem ipsum...</p>

</div>

Nesting Media Objects

You can also have nested media objects using bootstrap.

These are quite common in social websites these days.

For example, the ‘replies to the comment’ options in websites like Facebook, Twitter, Instagram etc.

Have employed the nested media object style for their media object positioning.