How to Bootstrap- Responsive Media Objects

In this guide, we will learn how to use responsive media objects in the Bootstrap front-end framework.

Bootstrap Media objects

If you want to create a layout that contains left or right-aligned media objects like images or video alongside the textual content such as blog comments, archives, lists etc. you can do this easily using the newly introduced Bootstrap media component,

Example
    <div class="media">
      <div class="media-left">
          <a href="#">
            <img src="avatar.jpg" class="mediaObject" alt="Avatar">
          </a>
      </div>
      <div class="mediaBody">
        <h4 class="media_heading">Anwar YP <small><i>Posted on February 05, 2017</i></small></h4>
        <p>Anwar YP is a content writer in Lauyou Learning. In addition, Anwar also
           work as SEO analyst at Lauyou Learning, helping business with search and content marketing.</p>
      </div>
    </div>

 

Result

Responsive Media Objects

Anwar YP Posted on February 05, 2017

Anwar YP is a content writer in Lauyou Learning. In addition, Anwar also work as SEO analyst at Lauyou Learning, helping business with search and content marketing.

 

You can also use image classes .img-rounded, .img-circle¬† to display rounded avatar object. Let’s look the example

Example
    <div class="media">
      <div class="media-left">
          <a href="#">
            <img src="avatar.jpg" class="mediaObject img-circle" alt="Avatar">
          </a>
      </div>
      <div class="mediaBody">
        <h4 class="media_heading">Anwar YP <small><i>Posted on February 05, 2017</i></small></h4>
        <p>Anwar YP is a content writer in Lauyou Learning. In addition, Anwar also
           work as SEO analyst at Lauyou Learning, helping business with search and content marketing.</p>
      </div>
    </div>

 

Result

Responsive Media Objects

Anwar YP Posted on February 05, 2017

Anwar YP is a content writer in Lauyou Learning. In addition, Anwar also work as SEO analyst at Lauyou Learning, helping business with search and content marketing.

 

Media Object Alignment

By default, media objects are top aligned. You can also align the media objects at the middle or bottom of the content block using the class .media-middle or .media-bottom.

Anwar Yakkiparamban

Anwar Yakkiparamban is the founder of Lauyou Learning. Prior to Lauyou learning, Anwar worked at ARD Engineering & Development, Qatar. He holds bachelor degree in Electronics and Communication Engineering from Govt. Engineering College Idukki.

You may also like...