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 the required positioning to the media objects on the webpage.

Bootstrap makes it much easier for the developers to align these media objects 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 both text and pictures are displayed for multiple users.

Basic Bootstrap Media Object

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

Observer the code followed by the explanation:

Bootstrap Media Left and Right Alignment

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.

Media bootstrap 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 align-self-start, align-self-centre and align-self-end.

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

Nested media object bootstrap

You can also have nested media objects using bootstrap.

These are quite common on 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.