The media object is an abstract element used as the basis for building more complex and repetitive components.

Example Code :

              
                  <div class="media">
                      <a class="media-left" href="#">
                          <img class="media-object" src="..." alt="Generic placeholder image">
                      </a>
                      <div class="media-body">
                          <h4 class="media-heading">Media heading</h4>
                          Media Text
                      </div>
                  </div>
              
          

Below have options that you can use with Media Objects :

Media Objects options	Class	Description
Bordered Media Object	.media-bordered	For bordered media object to each media list.
Media Header	.media-head	Header section for media object.
Round Media Objects	.rounded-circle	For round media object.
Linked Media	.media-linked	For linked media list
Media Object Positions	.media-[left/right]	For media align to left/right.
Media Object Vertical Positions	.media-[middle/bottom]	For vertical media align to middle/bottom.

Other options using media-ibjects can be like :

• Nested Media List
• Media Object with Notation Text
• Media Object with tags & pills
• Icon as Media Object
• Status Indicator to Media Object
• Notification to Media Object, etc...

Referrals :

Type	URL
Bootstrap Page	https://getbootstrap.com/docs/4.2/components/media-object/
Template Page	https://modernadmin.evolvision.com/components/mediaobjects