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.

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:

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

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 positionings.