YouTip LogoYouTip

Home > Bootstrap > Bootstrap Media Object

Bootstrap Media Object

📅 2026-06-19 | 📂 Bootstrap
## Bootstrap Media Object In this chapter, we will explain the Media Object in Bootstrap, such as images, videos, audio, etc. The styles for media objects can be used to create various types of components (like blog comments), where we can mix text and images within a component. The image can be aligned to the left or right. Media objects allow for mixing media and text with less code. Let's look at an example first: ## Example

Left aligned

This is some sample text...

Right aligned

This is some sample text...

[Try it »](#) The result is as follows: ![Image 1: Default Media Object](#) ### Example Explained Add the `.media` class to a `
` element to create a media object. Use the `.media-left` class to align the media object (image) to the left. Similarly, the `.media-right` class aligns it to the right. The text content is placed inside a div with `class="media-body"`. If the image is left-aligned, it is placed before the `class="media-body"` div. If the image is right-aligned, it is placed after the `class="media-body"` div. Additionally, you can use the `.media-heading` class to style the heading. Let's look at the following example of a media object list with `.media-list`: ### Top, Middle, and Bottom Alignment ## Example

Top aligned

This is some sample text...

Middle aligned

This is some sample text...

Bottom aligned

This is some sample text...

[Try it »](#) The result is as follows: ![Image 2: Media Object List](#) ### Nested Media Objects A media object can also contain other media objects: ## Example

-1 Posted on February 19, 2016

This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text.

-2 Posted on February 19, 2016

This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text.

-3 Posted on February 19, 2016

This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text.

[Try it »](#) ## Example

-1 Posted on February 19, 2016

This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text.

-2 Posted on February 20, 2016

This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text.

-3 Posted on February 21, 2016

This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text.

-4 Posted on February 20, 2016

This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text.

-5 Posted on February 19, 2016

This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text.

[Try it »](#)
← Bootstrap List GroupBootstrap Progress Bars →

📂 Categories