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
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
Ebhor.com
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.
Ebhor.com
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.
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-leftclass will be used to align the media object (image in this case) to the left and similarly,.media-rightclass 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-headingcan 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
Ebhor.com
Bootstrap ....
Ebhor.com
Bootstrap....
Ebhor.com
Bootstrap ....
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.
Ebhor.com
Bootstrap makes it much easier for the developers to align these media.
Ebhor.com
Bootstrap makes it much easier for the developers to align these media.
Ebhor.com
Bootstrap makes it much easier for the developers to align these media.