Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

bootstrap 4

What are media objects in Bootstrap 4?

Ahmad Youasf


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



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.


Now, let’s look at a code example:

  • HTML


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


bootstrap 4

View all Courses

Keep Exploring