Bootstrap 4 Media Objects

Bootstrap 4 Media Objects

Bootstrap 4 media objects provides functionality to place image either left or right to the textual content.

Follow the following steps to create bootstrap 4 media objects

  • To create a media object, you have to place .media to the parent container of the media object.
  • Place .media-body to the child element of media container that contains textual information.
  • Place <img> inside the media container having .media.

Example

Thumbnail Image

Web Designing

The web design learning process is very easy. You have to learn design techniques and tools that improve the design layout.

Web Designing

The web design learning process is very easy. You have to learn design techniques and tools that improve the design layout.

Thumbnail Image

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Bootstrap Media Object

Rounded Image

Media Object:Left Image

This is an example of a media object having the image in the left direction.

Media Object:Right Image

In this example,image is placed right side to the content.

Rounded Image

Note:In the above example, assign .media to the media object container and place the textual content inside the child element of media object having .media-object. In the end, place the image inside the media object.

Note: Media object provides facility to place image either left or right of the content that lies vertically center to the content.

Nested Media Objects

Media objects can be nested inside other media objects. It can be widely used in a blog post since more than one user interacts regarding any topic.

Rounded Image
Smith Roy Posted on 10 Jan ,2021

Bootstrap provides media object concept that id widely used in the blogging system. Most of the blogging comment system is designed on the concept of media object.

Circular Image
John Doe Posted on 12 Jan,2021

Really your comment is very useful during blogging system development.

Source Code

Try it now

Note:Please keep in mind that In the nested media object, the second media object is placed within .media-body section of first media object.

Alignment Of Media Objects

You can put image either left or right in media object. To put image left in media object place <img> inside media container as a first child and then place the <div> containing .media-body and to place right image ,you have to put the <div> containing .media-body class first and then <img>.

Generally image is aligned vertically at the top position. You can change it center by adding .align-self-center class to <img > tag base class and to align vertically end of the container by adding .align-self-end class to the <img> element base class.

Source Code

Try it now

Source Code : Output

Bootstrap Media Object

Rounded Image

Media Object:Left Image

This is an example of a media object having the image in the left direction.

Note:Please keep in mind that image can be placed either left or right inside the media object.

Bootstrap 4 Media Objects: List

Basically it is a group of media object that is created by providing .list-unstyled to either <ul> or <ol> element base class and add .media to the <li> element base class.

Source Code

Try it now

Source Code : Output

Media List

  • Rounded Image
    Media Object List Concept

    Lorem ipsum, dolor, sit amet consectetur adipisicing elit.

  • Rounded Image
    Media Object List Concept

    Lorem ipsum, dolor, sit amet consectetur adipisicing elit.

Note:Please keep in mind that it is a group of media object. All the media object is placed inside unordered list item or ordered list item.

Online Test / Quiz