Bootstrap 4 Objetos multimedia

Bootstrap proporciona una manera fácil de alinear objetos multimedia (como imágenes o videos) junto con el contenido. Los objetos multimedia a menudo se usan para mostrar comentarios de blog, tweets, etc.

Objeto multimedia básico

Para crear un objeto multimedia, agrega la clase .media a un elemento contenedor y coloca el contenido multimedia dentro de un contenedor secundario con la clase .media-body. Agrega relleno y márgenes según sea necesario, con las utilidades de espaciado.

Ejm

<div class="container mt-3">
  <h2>Media Object</h2>
  <p>Create a media object with the .media and .media-body classes:</p>
  <div class="media border p-3">
    <img src="img_avatar3.png" alt="John Doe" class="mr-3 mt-3 rounded-circle" 
    style="width:60px;">
    <div class="media-body">
      <h4>John Doe <small><i>Posted on February 19, 2016</i></small></h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>      
    </div>
  </div>
</div>

Objetos de medios anidados

Los objetos multimedia también se pueden anidar (un objeto multimedia dentro de un objeto multimedia):

Para anidar objetos multimedia, coloca un nuevo contenedor .media dentro del contenedor .media-body.

Ejm

<div class="media border p-3">
  <img src="img_avatar3.png" alt="John Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;">
  <div class="media-body">
    <h4>John Doe <small><i>Posted on February 19, 2016</i></small></h4>
    <p>Lorem ipsum...</p>
    <div class="media p-3">
      <img src="img_avatar2.png" alt="Jane Doe" class="mr-3 mt-3 rounded-circle" style="width:45px;">
      <div class="media-body">
        <h4>Jane Doe <small><i>Posted on February 20 2016</i></small></h4>
        <p>Lorem ipsum...</p>
      </div>
    </div> 
  </div>
</div>

Imagen de medios alineados a la derecha

Para alinear a la derecha la imagen multimedia, agrega la imagen después del contenedor .media-body.

Ejm

<div class="media border p-3">
  <div class="media-body">
    <h4>John Doe <small><i>Posted on February 19, 2016</i></small></h4>
    <p>Lorem ipsum...</p>
  </div>
  <img src="img_avatar3.png" alt="John Doe" class="ml-3 mt-3 rounded-circle" style="width:60px;">
</div>

Alineación superior, media o inferior

Ejm

<!-- 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>Lorem ipsum...</p>
  </div>
</div>

<!-- Media middle -->
<div class="media">
  <img src="img_avatar1.png" class="align-self-center mr-3" style="width:60px">
  <div class="media-body">
    <h4>Media Middle</h4>
    <p>Lorem ipsum...</p>
  </div>
</div>

<!-- Media bottom -->
<div class="media">
  <img src="img_avatar1.png" class="align-self-end mr-3" style="width:60px">
  <div class="media-body">
    <h4>Media Bottom</h4>
    <p>Lorem ipsum...</p>
  </div>
</div>