Buzz
For a detailed understanding of how to use Media Objects in Bootstrap, readers can refer to the following Bootstrap lesson by Mytour.
Exploring Media Objects in Bootstrap
1. Using Media Object in Bootstrap
2. Nesting Media Objects
3. Aligning Media Objects in Bootstrap
4. Creating Media List in Bootstrap
1. Using Media Object in Bootstrap
Suppose you want to create a layout containing media objects (such as images or videos) aligned left or right alongside text content, such as blog comments, Tweets, etc. To achieve this, we use Media Object in Bootstrap.
Example: In the example below, Media Object in Bootstrap is used to create a layout containing multimedia objects alongside text content:
The returned result is as follows:
Additionally, we can create different variations of the media component by applying image modification classes such as .rounded or .rounded-circle to create rounded images, as shown in the example below:
The returned result is as follows:
2. Nesting Media Objects
Media objects in Bootstrap can also be nested, meaning one media object can be nested within another. This option is useful for creating comment threads within a blog post.
Example: The example below illustrates how to create nested media objects in Bootstrap:
The returned result is as follows:
3. Aligning Media Objects in Bootstrap
To align text content and multimedia content (images) horizontally, we simply adjust the HTML code as shown in the example below:
The returned result is as follows:
Additionally, we can also align images or other multimedia objects in the center or bottom of content blocks using flexbox utility classes. For example, using the .align-self-center class to align content vertically and the .align-self-end class to align content at the bottom. By default, multimedia content in media objects is aligned at the top. Refer to the example below:
The returned result is as follows:
4. Creating Media Lists in Bootstrap
To create a media list in Bootstrap, we use HTML list elements and media object classes. Simply apply the .list-unstyled class on ul or ol elements, and the .media class on child li elements.
Example: The example below illustrates how to create a media list in Bootstrap:
The returned result is as follows:
In this lesson, Mytour introduces you to Media Object in Bootstrap. In the next lesson, Mytour will continue to introduce you to icons in Bootstrap.
