Bootstrap Multimedia Objects (Media Object)

In this chapter, we will explain the media objects (Media Object) in Bootstrap, such as images, videos, audio, etc. The styles of media objects can be used to create various types of components (such as blog comments). We can use a combination of text and images in the components, and the images can be left-aligned or right-aligned. Media objects can be used to mix media objects and text together with less code.

Next, let's first look at an example:

The result is shown below:

Example Analysis

On the <div> element, add.mediaa class to create a media object.

Use.media-lefta class to make the media object (image) align left; likewise,.media-righta class achieves right alignment.

The text content is placed in class=media-bodyin the div; if the image is left-aligned, place it before class=media-bodybefore; if the image is right-aligned, place it after class=media-bodyafter.

In addition, you can also use.media-headinga class to set the title.

Let's take a look at the following example of the media object list .media-list:

Top, Bottom, Center Alignment

The result is shown below:

Nested Media Objects

A media object can also contain multiple media objects inside: