/    /  Bootstrap Media Objects

Bootstrap Media Objects

 

The Bootstrap provides an easy way to align Media Objects like images or videos can be aligned to the left or right with content in an easy and efficient manner.

 

Basic Media Object:

 

Use .media class to the container or container-fluid element, and place media content inside the child container with the .media-body class.

 

Example:

 

<div class="container">
 <h3>Basic media objects</h3>
  <div class="media">
    <img src="/examples/images/avatar.svg" class="mr-3 rounded" alt="Sample Image">
    <div class="media-body">
      <h5 class="mt-0">name<small><i>post - 2/2/20</i></small></h5>
      <p>enter text here...</p>
    </div>
  </div>
</div>

 

OUTPUT:

 

Bootstrap4 Media Objects

 

Nested Media Objects:

 

Media object added inside the media object is called Nested Media Objects.Place a new .media container inside the .media-body class container.

 

Example:

 

<div class="bs-example">
 <h3>Nested Media Objects</h3>
  <div class="media">
    <img src="/examples/images/avatar.svg" class="rounded-circle mr-3" alt="Sample Image">
    <div class="media-body">
      <h5 class="mt-0">Name <small><i>Post 1/1/2020</i></small></h5>
      <p>enter text here</p>
      <!-- Nested media object -->
      <div class="media mt-2">
        <img src="/examples/images/avatar.svg" class="rounded-circle mr-3" alt="Sample Image">
        <div class="media-body">
          <h5 class="mt-0">Name <small><i>Post 1/1/2020</i></small></h5>
          <p>enter text here..</p>
        </div>
      </div>
    </div>
  </div>
</div>

 

OUTPUT:

 

Bootstrap4 Media Objects

 

Right-Aligned Media Image:

 

You can also change the horizontal alignment of content and media  to right-align the media image, add the image after the .media-body container.

 

Example:

 

<div class="container">
 <h4>Right-Aligned Media Image</h4>
  <div class="media">
    <div class="media-body">
      <h5 class="mt-0">name <small><i>Posted 2/10/2019</i></small></h5>
      <p>enter content here...</p>
    </div>
    <img src="/examples/images/avatar.svg" class="ml-3" alt="Sample Image">
  </div>
</div>

 

OUTPUT:

 

Bootstrap4 Media Objects

 

Top, Middle or Bottom Alignment:

 

The flex utilities, align-self-* classes to place the media object on the top, bottom, or at the middle.

 

Example:

 

<div class="container mt-3">
 <h4>Top, Middle or Bottom Alignment</h4>
 <!-- Media top -->
 <div class="media">
  <img src="img_avatar1.png" class="align-self-start mr-3" style="width:60px">
  <div class="media-body">
   <h4>Media Top</h4>
   <p>enter contetn here........</p>    
  </div>
 </div>
 <!-- Media middle -->
 <div class="media mt-3">
  <img src="img_avatar1.png" class="align-self-center mr-3" style="width:60px">
  <div class="media-body">
   <h4>Media Middle</h4>
   <p>enter contetn here........</p>    
  </div>
 </div>
 <!-- Media bottom -->
 <div class="media mt-3">
  <img src="img_avatar1.png" class="align-self-end mr-3" style="width:60px">
  <div class="media-body">
   <h4>Media Bottom</h4>
   <p>enter contetn here........</p>    
  </div>
 </div>
</div>

 

OUTPUT:

 

Bootstrap4 Media Objects