Hello Dear Readers, Today In this Post, You will learn Bootstrap 5 Tutorial In Hindi #38 | Bootstrap 5 Media Object Class. Earlier I have shared the Bootstrap 5 Tutorial In Hindi #37 | Bootstrap 5 Card Group Class. and now it’s time to Bootstrap 5 Media Object Class.

In this tutorial, You will learn full Bootstrap 5. If you want to go deep into the tutorial so you can watch the full video which is below Hope it will help you all thank you for visiting.

In this tutorial, you will learn Bootstrap Tutorial In Hindi, Bootstrap 5 Media Object Class. Here You can learn what is a bootstrap framework, what are the advantages of the bootstrap tutorial in Hindi. Make sure to Subscribe, Share the video, and Like it, for more tutorials in Hindi like this one!

Media object

Bootstrap 5 Media object – examples & tutorial

Responsive Media objects built with the latest Bootstrap 5. Dedicated for highly repetitive components like blog comments, tweets, and the like.

Bootstrap 5 does not provide ready-to-use Media Objects (such as in Bootstrap 4), but their reconstruction is simple and the flexbox utilities are enough for it.

Using the Media Object in Bootstrap

Bootstrap media object has been discontinued from version 5. However, you can still create a layout that contains left- or right-aligned media object like images or video alongside the textual content such as blog comments, Tweets, etc. using the flex and spacing utility classes.

Creating Nested Media Objects

Media objects can also be nested inside other media object. It can be very useful for creating comment threads

Alignment of Media Objects

You can also change the horizontal alignment of content and media by simply tweaking the HTML code itself,

Besides that you can also align the images or other media at the middle or bottom of the content block using the flexbox utilities classes, for example, you can use the class .align-self-center for vertical center alignment, and the class .align-self-end for bottom alignment.

Example explained

Use a <div> element with the .media class to create a container for media objects.

Use the .media-left class to align the media object (image) to the left, or the .media-right class to align it to the right.

Text that should appear next to the image, is placed inside a container with class=”media-body“.

Additionally, you can use .media-heading for headings.

Top, Middle or Bottom Alignment

The media object can also be top, middle or bottom aligned with the media-top, media-middle or media-bottom class