Bootstrap 4 Tutorial
BS4 Media Objects
Media Objects
A simple method for aligning media items (such as pictures or videos) with content is to use bootstrap. Media objects are frequently used to show tweets, blog comments, and other content:
Basic Media Object
Place media material inside a child container with the .media-body class and add the .media class to the container element to create a media object. Use the spacing tools to add margins and padding as necessary:
Example
<div class="media border p-3">
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="John Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;" title="BS4 Media Objects 3" data-lazy-src="img_avatar3.png"><noscript><img decoding="async" src="img_avatar3.png" alt="John Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;" title="BS4 Media Objects 3"></noscript>
<div class="media-body">
<h4>John Doe <small><i>Posted on February 19, 2016</i></small></h4>
<p>Lorem ipsum...</p>
</div>
</div>
Nested Media Objects
A media object inside another media object is known as nested media objects:
Place a fresh .media container within the .media-body container to nest media objects:
Example
<div class="media border p-3">
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="John Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;" title="BS4 Media Objects 3" data-lazy-src="img_avatar3.png"><noscript><img decoding="async" src="img_avatar3.png" alt="John Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;" title="BS4 Media Objects 3"></noscript>
<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 decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Jane Doe" class="mr-3 mt-3 rounded-circle" style="width:45px;" title="BS4 Media Objects 6" data-lazy-src="img_avatar2.png"><noscript><img decoding="async" src="img_avatar2.png" alt="Jane Doe" class="mr-3 mt-3 rounded-circle" style="width:45px;" title="BS4 Media Objects 6"></noscript>
<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>
Right-Aligned Media Image
Place the media picture after the .media-body container to position it to the right:
Example
<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 decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="John Doe" class="ml-3 mt-3 rounded-circle" style="width:60px;" title="BS4 Media Objects 8" data-lazy-src="img_avatar3.png"><noscript><img decoding="async" src="img_avatar3.png" alt="John Doe" class="ml-3 mt-3 rounded-circle" style="width:60px;" title="BS4 Media Objects 8"></noscript>
</div>
Top, Middle or Bottom Alignment
Utilize the align-self-* classes and flex utilities to position the media object at the top, middle, or bottom:
Example
<!-- Media top -->
<div class="media">
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" class="align-self-start mr-3" style="width:60px" alt="BS4 Media Objects -" title="BS4 Media Objects 10" data-lazy-src="img_avatar1.png"><noscript><img decoding="async" src="img_avatar1.png" class="align-self-start mr-3" style="width:60px" alt="BS4 Media Objects -" title="BS4 Media Objects 10"></noscript>
<div class="media-body">
<h4>Media Top</h4>
<p>Lorem ipsum...</p>
</div>
</div>
<!-- Media middle -->
<div class="media">
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" class="align-self-center mr-3" style="width:60px" alt="BS4 Media Objects -" title="BS4 Media Objects 11" data-lazy-src="img_avatar1.png"><noscript><img decoding="async" src="img_avatar1.png" class="align-self-center mr-3" style="width:60px" alt="BS4 Media Objects -" title="BS4 Media Objects 11"></noscript>
<div class="media-body">
<h4>Media Middle</h4>
<p>Lorem ipsum...</p>
</div>
</div>
<!-- Media bottom -->
<div class="media">
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" class="align-self-end mr-3" style="width:60px" alt="BS4 Media Objects -" title="BS4 Media Objects 12" data-lazy-src="img_avatar1.png"><noscript><img decoding="async" src="img_avatar1.png" class="align-self-end mr-3" style="width:60px" alt="BS4 Media Objects -" title="BS4 Media Objects 12"></noscript>
<div class="media-body">
<h4>Media Bottom</h4>
<p>Lorem ipsum...</p>
</div>
</div>
