Bootstrap 4 Objetos multimedia
Objetos multimedia
Bootstrap proporciona una manera fácil de alinear objetos multimedia (como imágenes o videos) junto con el contenido. Los objetos multimedia se utilizan a menudo para mostrar comentarios de blogs, tweets, etc.:
John Doe Publicado el 19 de febrero de 2016
El dolor en sí es el amor del dolor, los principales problemas ecológicos, pero doy este tipo de tiempo para caer, por lo que un gran dolor y dolor.
John Doe Publicado el 20 de febrero de 2016
El dolor en sí es el amor del dolor, los principales problemas ecológicos, pero doy este tipo de tiempo para caer, por lo que un gran dolor y dolor.
Objeto multimedia básico
John Doe Publicado el 19 de febrero de 2016
El dolor en sí es el amor del dolor, los principales problemas ecológicos, pero doy este tipo de tiempo para caer, por lo que un gran dolor y dolor.
Para crear un objeto multimedia, agregue la .mediaclase a un elemento contenedor y coloque el contenido multimedia dentro de un contenedor secundario con la .media-bodyclase. Agregue relleno y márgenes según sea necesario, con las utilidades de espaciado:
Ejemplo
<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>
</div>
Objetos multimedia anidados
Los objetos multimedia también se pueden anidar (un objeto multimedia dentro de un objeto multimedia):
John Doe Publicado el 19 de febrero de 2016
El dolor en sí es el amor del dolor, los principales problemas ecológicos, pero doy este tipo de tiempo para caer, por lo que un gran dolor y dolor.
Jane Doe Publicado el 20 de febrero de 2016
El dolor en sí es el amor del dolor, los principales problemas ecológicos, pero doy este tipo de tiempo para caer, por lo que un gran dolor y dolor.
Para anidar objetos multimedia, coloque un nuevo .mediacontenedor dentro del .media-bodycontenedor:
Ejemplo
<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 multimedia alineada a la derecha
John Doe Publicado el 19 de febrero de 2016
El dolor en sí es el amor del dolor, los principales problemas ecológicos, pero doy este tipo de tiempo para caer, por lo que un gran dolor y dolor.
Para alinear a la derecha la imagen multimedia, agregue la imagen después del .media-bodycontenedor:
Ejemplo
<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
Use las utilidades flexibles, align-self-*clases para colocar el objeto multimedia en la parte superior, media o inferior:
Parte superior de los medios
El dolor en sí es el amor del dolor, los principales problemas ecológicos, pero doy este tipo de tiempo para caer, por lo que un gran dolor y dolor.
El dolor en sí es el amor del dolor, los principales problemas ecológicos, pero doy este tipo de tiempo para caer, por lo que un gran dolor y dolor.
medio medio
El dolor en sí es el amor del dolor, los principales problemas ecológicos, pero doy este tipo de tiempo para caer, por lo que un gran dolor y dolor.
El dolor en sí es el amor del dolor, los principales problemas ecológicos, pero doy este tipo de tiempo para caer, por lo que un gran dolor y dolor.
Parte inferior de medios
El dolor en sí es el amor del dolor, los principales problemas ecológicos, pero doy este tipo de tiempo para caer, por lo que un gran dolor y dolor.
El dolor en sí es el amor del dolor, los principales problemas ecológicos, pero doy este tipo de tiempo para caer, por lo que un gran dolor y dolor.
Ejemplo
<!-- 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>