Bootstrap Media Object

If you want to display the media objects to the right side or left side of the block of content, you can use Bootstrap media object component.

Here is a simple example of Bootstrap media object:-

Output

Billi Bravo

Creating a Bootstrap media component for any website is the useful component to create a discussion forum comments. It’s the easiest and the quickest way of creating comments for my blog.

Bootstrap media object component provides all the useful classes by which you align media object, create a nested media list component. You just need to add few classes and your media component is ready to use for your website or blog.

Create Simple Bootstrap Media Object Component

To create a media object component, you need to put an object like image or videos and the block of content inside the <div> element with the class .media.

Now, create two <div> element inside the .media class div.

In the first div element, put the media object image or video and add class .media-left as the class of div.

In the second div element, put the block of content and add the class .media-body as the class of the div element.

See the example below to understand how to create media object using the bootstrap.

Output

Billi Bravo

Creating a Bootstrap media component for any website is the useful component to create a discussion forum comments. It’s the easiest and the quickest way of creating comments for my blog.

Aligning Media Objects

You can also align the media object to the top, middle and bottom of the content. Use the below given classes to align the media objects.

Class Name	Description
.media-top	Specify this class to align the media object to the top of the block of content.
.media-middle	Align the media object to the middle of the block of content using this class.
.media-bottom	If you want to place the media object to the bottom of the block of content, you can specify this class.

See the below example to align the media objects.

Output

Top Aligned Media

Creating a Bootstrap media component for any website is a useful component to create a discussion forum comments. It’s the easiest and the quickest way of creating comments for my blog.
Thank you for your response.
You don’t need to add any extra CSS to align the media objects. You can align media object to the middle, center or top position.
Put your media object to the left or right position with just the addition few classes of bootstrap.

Middle Aligned Media

Creating a Bootstrap media component for any website is a useful component to create a discussion forum comments. It’s the easiest and the quickest way of creating comments for my blog.
Thank you for your response.
You don’t need to add any extra CSS to align the media objects. You can align media object to the middle, center or top position.
Put your media object to the left or right position with just the addition few classes of bootstrap.

Bottom Aligned Media

Creating a Bootstrap media component for any website is a useful component to create a discussion forum comments. It’s the easiest and the quickest way of creating comments for my blog.
Thank you for your response.
You don’t need to add any extra CSS to align the media objects. You can align media object to the middle, center or top position.
Put your media object to the left or right position with just the addition few classes of bootstrap.

How to Create Nested Bootstrap Media Lists

If you want to create a comment system for your blog, you can use nested bootstrap media object to get multiple queries from users.

Create multilevel comment system design with the nested media object as given in the example below.

Output

Billi Bravo

Creating a Bootstrap media component for any website is the useful component to create a discussion forum comments. It’s the easiest and the quickest way of creating comments for my blog.

Billi Bravo

Creating a Bootstrap media component for any website is a useful component to create a discussion forum comments. It’s the easiest and the quickest way of creating comments for my blog.

Billi Bravo

Creating a Bootstrap media component for any website is the useful component to create a discussion forum comments. It’s the easiest and the quickest way of creating comments for my blog.

Billi Bravo

Creating a Bootstrap media component for any website is the useful component to create a discussion forum comments. It’s the easiest and the quickest way of creating comments for my blog.