Media Objects

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.
Round Media Objects .media-round For round media object.
Media Object Vertical Positions .align-self-[start/center/end] For vertical media align to top/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.0/layout/media-object/
Template Page https://demos.pixinvent.com/apex-angular-admin-template/demo-1/components/media