Bootstrap Media Objects

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

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

Basic Steps

  • Step1: To create media object,you have to place .media to the parent container of media object.
  • Step2: Place .media-body to the child element of media container that contains textual information.
  • Step2: 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

		<div class="media">
  <img src="https://picsum.photos/200/300" class="rounded img-fluid m-4" alt="Rounded Image" />
  <div class="media-body p-2">
    <h4 class="mt-0">Media Body Heading</h4>
    <p>Media body content.</p>
  </div>
</div>
	  
Try It Now

Source Code

	
		<div class="container my-2">
  <div class="media">
    <img src="https://picsum.photos/200/300" class="rounded img-fluid m-4" 
         alt="Rounded Image" style="width: 150px; height: 150px;" />
    <div class="media-body p-2">
      <h4 class="mt-0">Media Object: Left Image</h4>
      <p>This is an example of media object having image in the left direction.</p>
    </div>
  </div>
</div>	
	
Try it yourself

Source Code : Output

Rounded Image

Media Object: Left Image

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

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.

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

General Syntax

		<div class="media">
  <img src="..." class="rounded img-fluid m-4" alt="Rounded Image" />
  <div class="media-body">
    <h5 class="mt-0">
      Smith Roy<small><i>Posted on 10 Jan ,2021</i></small>
    </h5>
    <p>Media body content</p>
    <!-- Nested media object -->
    <div class="media mt-2">
      <img src="...." class="rounded img-fluid m-4" alt="Rounded Image" />
      <div class="media-body">
        <h5 class="mt-0">
          John Doe <small><i>Posted on 12 Jan,2021</i></small>
        </h5>
        <p>Media Body content</p>
      </div>
    </div>
  </div>
</div>
	  
Try It Now

Source Code

	
		<div class="container mt-4">
  <div class="media">
    <img src="https://picsum.photos/200/300" class="rounded img-fluid m-4" alt="Rounded Image"
         style="width: 40px; height: 40px;" />
    <div class="media-body">
      <h5 class="mt-0">
        Smith Roy<small><i>Posted on 10 Jan ,2021</i></small>
      </h5>
      <p>Bootstrap provides media object concept that id widely used in the bloging system.
        Most of the blogging comment system is designed on the concept of media object.</p>
      <!-- Nested media object -->
      <div class="media mt-2">
        <img src="https://picsum.photos/200/300" class="rounded img-fluid m-4"
             alt="Rounded Image" style="width: 40px; height: 40px;" />
        <div class="media-body">
          <h5 class="mt-0">
            John Doe <small><i>Posted on 12 Jan,2021</i></small>
          </h5>
          <p>Really your comment is very useful during blogging system development.</p>
        </div>
      </div>
    </div>
  </div>
</div>	
	
Try it yourself

Source Code : Output

Rounded Image
Smith RoyPosted on 10 Jan ,2021

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

Rounded Image
John Doe Posted on 12 Jan,2021

Really your comment is very useful during blogging system development.

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

General Syntax

		<div class="media">
  <img src="https://picsum.photos/200/300" class="rounded img-fluid m-4" alt="Rounded Image" />
  <div class="media-body p-2">
    <p class="mt-0">Media Body Content</p>
  </div>
</div>
	  
Try It Now

Source Code

	
		<div class="container">
  <div class="media">
    <img src="https://picsum.photos/200/300" class="rounded img-fluid m-4" alt="Rounded Image"
         style="width: 150px; height: 150px;" />
    <div class="media-body p-2">
      <h4 class="mt-0">Media Object:Left Image</h4>
      <p>This is an example of media object having image in the left direction.</p>
    </div>
  </div>
</div>	
	
Try it yourself

Source Code : Output

Rounded Image

Media Object:Left Image

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

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

Creating Media 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.

General Syntax

		<ul class="list-unstyled">
  <li class="media my-2">
    <img src="...." class="rounded img-fluid mr-3" alt="Rounded Image" />
    <div class="media-body">
      <h5 class="mt-0">Media Object List Concept</h5>
      <p>Media Body Content..</p>
    </div>
  </li>
  <li class="media">
    <img src="...." class="rounded img-fluid mr-3" alt="Rounded Image" />
    <div class="media-body">
      <h5 class="mt-0">Media Object List Concept</h5>
      <p>Media Body Content..</p>
    </div>
  </li>
</ul>
	  
Try It Now

Source Code

	
		<div class="container text-center mt-4">
  <ul class="list-unstyled">
    <li class="media">
      <img src="https://picsum.photos/200/300" class="rounded img-fluid mr-3" alt="Rounded Image" style="width: 100px; height: 100px;" />
      <div class="media-body">
        <h5 class="mt-0">Media Object List Concept</h5>
        <p>Write down media body content.</p>
      </div>
    </li>
    <li class="media my-2">
      <img src="https://picsum.photos/200/300" class="rounded img-fluid mr-3" alt="Rounded Image" style="width: 100px; height: 100px;" />
      <div class="media-body">
        <h5 class="mt-0">Media Object List Concept</h5>
        <p>Describe media body content.</p>
      </div>
    </li>
    <li class="media">
      <img src="https://picsum.photos/200/300" class="rounded img-fluid mr-3" alt="Rounded Image" style="width: 100px; height: 100px;" />
      <div class="media-body">
        <h5 class="mt-0">Media Object List Concept</h5>
        <p>Mention media body content.</p>
      </div>
    </li>
  </ul>
</div>	
	
Try it yourself

Source Code : Output

  • Rounded Image
    Media Object List Concept

    Write down media body content.

  • Rounded Image
    Media Object List Concept

    Describe media body content.

  • Rounded Image
    Media Object List Concept

    Mention media body content.

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.

Our Tutorials

Bootstrap Media Objects
Html Tutorial HTML
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4
Materialize CSS Tutorial MATERIALIZE CSS