How To Create Media Objects Using Bootstrap

In this blog, I will explain you how to use Bootstrap media object component in detail.

If you want to show your profile description shortly with your image such as tweets, blog comments etc, you can do this easily, using introduced Bootstrap media component, as shown below.

<div class="media">
    <div class="media-left">
        <a href="#"> <img src="avatar-tiny.jpg" class="media-object" alt="Sample Image"> </a>
    </div>
    <div class="media-body">
        <h4 class="media-heading">Prem Kumar Rathrola <small><i>Posted on January 10, 2016</i></small></h4>
        <p>Excellent feature! I love it. One day I'm definitely going to put this Bootstrap component into use and I'll let you know once I do.</p>
    </div>
</div>

The output of the example given above will look, as shown below.



We can also do some customization on the images by applying modifier classes like .img-rounded, .img-circle etc. to the image to create some variations.
 


Hope, this blog finds you well. Sharing is caring.