The bootstrap media object is used to make left or right align media like video or image and the media object is mainly used in waterfall instruction comments or testimonials. Now start to learn Bootstrap 3 Media Objects step by step.
Default bootstrap 3 media
to make a default media in bootstrap 3 take a div with the class name .media and inside that take div with the class name .media-heading and .media-body
Example:
<div class="media">
<div class="media-body">
<h4 class="media-heading">John Doe</h4>
<p>Lorem ipsum...</p>
</div>
</div>
Left-aligned media
use class name .media-left inside a div with the class name .media
Example:
<!-- Left-aligned -->
<div class="media">
<div class="media-left">
<img src="img_avatar1.png" class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">John Doe</h4>
<p>Lorem ipsum...</p>
</div>
</div>
Right align media
use class name .media-right inside a div with the class name .media
Example:
<!-- Right-aligned -->
<div class="media">
<div class="media-body">
<h4 class="media-heading">John Doe</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="media-right">
<img src="img_avatar1.png" class="media-object" style="width:60px">
</div>
</div>
Top align media
make a media on the top of the div by using the class name .media-top
Example:
<!-- Media top -->
<div class="media">
<div class="media-left media-top">
<img src="img_avatar1.png" class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">Media Top</h4>
<p>Lorem ipsum...</p>
</div>
</div>
Middle align media
to make a media on middle position vertically use the class name .media-middle
Example:
<!-- Media middle -->
<div class="media">
<div class="media-left media-middle">
<img src="img_avatar1.png" class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">Media Middle</h4>
<p>Lorem ipsum...</p>
</div>
</div>
Bottom align media
place a media position at the bottom of the div by using the class name .media-bottom
Example:
<!-- Media bottom -->
<div class="media">
<div class="media-left media-bottom">
<img src="img_avatar1.png" class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">Media Bottom</h4>
<p>Lorem ipsum...</p>
</div>
</div>
Bootstrap 3 Nested media
To make a nested media in bootstrap 3 write another media inside the body of a media object
Example:
<div class="media">
<div class="media-left">
<img src="img_avatar1.png" class="media-object" style="width:45px">
</div>
<div class="media-body">
<h4 class="media-heading">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>
<!-- Nested media object -->
<div class="media">
<div class="media-left">
<img src="img_avatar2.png" class="media-object" style="width:45px">
</div>
<div class="media-body">
<h4 class="media-heading">John Doe <small><i>Posted on February 20, 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>
<!-- Nested media object -->
<div class="media">
<div class="media-left">
<img src="img_avatar3.png" class="media-object" style="width:45px">
</div>
<div class="media-body">
<h4 class="media-heading">John Doe <small><i>Posted on February 21, 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>
<!-- Nested media object -->
<div class="media">
<div class="media-left">
<img src="img_avatar4.png" class="media-object" style="width:45px">
</div>
<div class="media-body">
<h4 class="media-heading">Jane Doe <small><i>Posted on February 20, 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>
</div>
<!-- Nested media object -->
<div class="media">
<div class="media-left">
<img src="img_avatar5.png" class="media-object" style="width:45px">
</div>
<div class="media-body">
<h4 class="media-heading">Jane 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>
In this post we have learned how to create Bootstrap 3 Media Objects, Hope the post helped, please provide your comment to make the site more useful and better.
Thanks for Reading.