YouTip

# Bootstrap4 Media Objects Bootstrap provides an excellent way to handle the layout of media objects (images or videos) alongside content. Common use cases include blog comments, social media posts, etc. ## Basic Media Object To create a media object, add the `.media` class to a container element. Then, place the media content inside a child container with the `.media-body` class. You can then add margins, padding, and other effects: ## Example [Try it »](#) * * * ## Nested Media Objects Media objects can be nested (one media object inside another). To nest a media object, place the new `.media` container inside the `.media-body` container: ## Example [Try it »](#) * * * ## Media Object Image on the Right If you want the avatar image to appear on the right side, place the image after the `.media-body` container: ## Example [Try it »](#) * * * ## Aligning Media Object Images We can use the `align-self-*` utility classes to set the vertical alignment of the media object's image: ## Example [Try it »](#)