YouTip

In this section, we will discuss media objects in Bootstrap. These abstract object styles are used to suggest multiple component types (such as blog comments), allowing us to mix text and images within a component. Images can be aligned to the left or right. Media objects enable the mixing of multimedia objects and text with less code. You can set up a media object by adding the following two forms to your HTML tags: * .media: This class allows the media (images, videos) within the media object to float to the left or right of the content block. * .media-list: If you need a list where each item is part of an unordered list, you can use this class. It is suitable for comment lists and article lists. Now, let's look at an example using the media object's .media class: (#) The display effect of the above example is as follows: !(#) Now, let's look at an example using the media object's .media-list class:

• 

  Media heading

  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.

  

  Nested media heading

  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.

  

  Nested media heading

  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.

  

  Nested media heading

  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.
• 

  Media heading

  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.

(#) The display effect of the above example is as follows: !(#)