Bootstrap 4 Media Objects

Bootstrap 4 offers a media object component that aligns the media objects and the content. The media object is used to create a repetitive and complex component in which media is placed on either side (i.e., either left or right) of the component such as blogs, tweets, comments, etc.

Basic Media Object – The basic media object is used to create a layout that contains media on any one side (either left or right) along with the content.

Steps for creating Media Object

  • Add .media class to the parent element <div>.
  • Add the .media-body class to the child element to add the body.

Note: You need to add margin and padding on your own with the help of spacing utilities.

Example

Output

media.PNG

Nested Media Object – Bootstrap 4 also allows you to create a nested media object. The nested media object mans one media object inside the other. The example of the nested media object is comment thread. To create a nested media object,

  • Add a new .media class to the <div> element.
  • Add the .media-body to the child element.

Example

Output

media1.PNG

Right-Aligned Media Object – If you want to create a right-aligned media object, add the image using <img> element before the .media-body.

Example

Output

media2.PNG

Top, Middle, and Bottom Alignment – You can place the media object anywhere in the component. To place the media object on the top, bottom and middle, add .align-self-* class to the <img> element.

 Example

Output

media3.1.PNG
media3.2.PNG
media3.3.PNG

Pin It on Pinterest

Share This