GERENCIA VIRTUAL

“Capacitación y asesoría a solo un click”

Objetos Multimedia en BOOSTRAP

Bootstrap proporciona una manera fácil para alinear objetos multimedia (como imágenes o
videos), junto con el contenido. Los objetos multimedia a menudo se utilizan para mostrar los
comentarios de blogs, tweets y así sucesivamente:

Objeto de 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 los márgenes según sea necesario, con las utilidades de separación:

<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>Publicado en Febrero 19, 2019</i></small></h4>
<p>Lorem ipsum...</p>
</div>
</div>

Ver: Código 225.html

 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

Anidar objetos multimedia

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

Para objetos multimedia anidados, coloque un nuevo contenedor .media dentro del
contenedor .media-body:

<div class="media border p-3">

<img src="images/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>Publicado en Februaro 19, 2016</i></small></h4>
<p>Lorem ipsum...</p>
<div class="media p-3">
<img src="images/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> Publicado en Februaro 20, 2016</i></small></h4>
<p>Lorem ipsum...</p>
</div>
</div>
</div>
</div>

Ver: Código 226.html

Alineado a la Derecha Imagen de Prensa

Alinear a la derecha la imagen de medios, añadir la imagen después del contenedor .media-body:
 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

<div class="media border p-3">

<div class="media-body">
<h4>John Doe <small><i>Publicado en Febrero 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>

Ver: Código 227.html

Arriba, Medio o alineación inferior

Utilice las utilidades de flexión, clases align-self-* para colocar el objeto multimedia en la parte
superior, media o en la parte inferior:

<!-- Media arriba -->

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

Ver: Código 228.html