#         
## Overview 
In Bootstrap, **`media`** objects are the easiest method used for displaying images or videos that are either aligned left or right with the content. This `media` objects method is used where the data is positioned along with the content to build up the recursive components of the content, as we do in tweets.

Types of media objects

align-center

#        
## Code

Now, let's look at a code example: 

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=, initial-scale=1.0">
      <title>Bootstrap 4 Media objects</title>
   </head>
   <body>
      <h1>Basic Media</h1>
      <div class=" Media1 ">
         <img src="contact.png" alt="contact" style="width: 50px;">
         <div class="media-body">
            <h2>Eric <small><i>Published on Jan 19,2022</i></small></h2>
            <p>This is Eric and He published his article on 19 Jan and have many other contributions</p>
         </div>
      </div>
      <h1>Nested Media objects</h1>
      <div class="Media2">
         <img src="contact1.png" alt="contact" class=" rounded-circle" style="width: 50px;">
         <div class="media-body">
            <h2 class="heading">Harry <small><i>Published on Jan 20,2022</i></small></h2>
            <p>This is Harry and He published his article on 20 Jan and have many other contributions</p>
            <div class="Media3">
               <img src="contact.png" alt="contact" class=" rounded-circle" style="width: 50px;">
               <div class="media-body">
                  <h2 class="heading">Allies <small><i>Published on Jan 25,2022</i></small></h2>
                  <p>This is Allies.He Published his article on 25 Jan and working with Jerry</p>
               </div>
            </div>
         </div>
      </div>
   </body>
</html>


codemirror

#      
## Explanation

* Lines 11–17: In the code given above, we create the `Media1` class in which there is an image of Tom. In the `media-body` class of the `Medai1` class, there is some heading or text. This `Media1` class represents the basic `media`. 

* Lines 19–32: We create the `Media2` and `Media3` classes in which there are two images of Harry and Eric, respectively. In the `media-body` classes of the `Media2` and `Media3` class, some heading and text are given. The `Media2` and `Media3` classes represent the nested `media` objects.

What are media objects in Bootstrap 4?

Displays images/videos aligned with content, useful for creating recursive media elements like tweets.

Type	Description
Basic media objects	These are created when the `.media` class is placed in a container, which then places the media content in the child's class with the `.media-object` class.
Aligned media image	To align a media image, we add the image to the right/left/vertical/horizontal side after the content class.
Nested media objects	A nested media object is created when a media object is placed inside another media object.
Media lists	Media lists are created by placing media objects inside lists.