Bootstrap4 Media Objects
Bootstrap provides a great way to handle the layout of media objects (images or videos) and content. Application scenarios include blog comments, Weibo, etc.:
Basic Media Objects
To create a media object, add a .media class to the container element, then place the media content in a child container. The child container needs to add the .media-body class, and then add margins, padding, and other effects:
Example
<div class="media border p-3">
<img src="mobile-icon.png" alt="John Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;">
<div class="media-body">
<h4>Example</h4>
<p>What you learn is not just technology, but also a dream!!!</p>
</div>
</div>
Try it Yourself »
Nested Media Objects
Media objects can be nested multiple times (one media object contains another media object).
To nest media objects, you can place the new.mediacontainer into the.media-bodycontainer:
Example
<div class="media border p-3">
<img src="mobile-icon.png" alt="John Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;">
<div class="media-body">
<h4>Example</h4>
<p>What you learn is not just technology, but also a dream!!!</p>
<div class="media p-3">
<img src="mobile-icon.png" alt="Jane Doe" class="mr-3 mt-3 rounded-circle" style="width:45px;">
<div class="media-body">
<h4>Example</h4>
<p>What you learn is not just technology, but also a dream!!!</p>
</div>
</div>
</div>
</div>
Try it Yourself »
Media Object Image Displayed on the Right
If you want to display the avatar image on the right, you can.media-bodyadd the image after the container:
Example
<div class="media border p-3">
<div class="media-body">
<h4>Example</h4>
<p>What you learn is not just technology, but also a dream!!!</p>
</div>
<img src="mobile-icon.png" alt="John Doe" class="ml-3 mt-3 rounded-circle" style="width:60px;">
</div>
Try it Yourself »
Positioning Media Object Images
We can use the align-self-* related classes to set the image display position of media objects:
Example
<div class="media">
<img src="https://static.jyshare.com/images/mobile-icon.png" class="align-self-start mr-3" style="width:60px">
<div class="media-body">
<h4>Top -- Example</h4>
<p>What you learn is not just technology, but also a dream!!!</p>
</div>
</div>
<div class="media">
<img src="https://static.jyshare.com/images/mobile-icon.png" class="align-self-center mr-3" style="width:60px">
<div class="media-body">
<h4>Center -- Example</h4>
<p>What you learn is not just technology, but also a dream!!!</p>
</div>
</div>
<div class="media">
<img src="https://static.jyshare.com/images/mobile-icon.png" class="align-self-end mr-3" style="width:60px">
<div class="media-body">
<h4>Bottom -- Example</h4>
<p>What you learn is not just technology, but also a dream!!!</p>
</div>
</div>
Try it Yourself »
Other Extensions