Holla Tech - Learn
Bootstrap 3: Media Objects
 

Bootstrap makes it easy to align media objects like images and videos to the left or right of some content:
A <div> of class media holds the entire content.
A <div> of class media-left or media-right holds the media to be displayed to the left or right of content.
The media to be displayed should be of the media-object class.
A <div> of class media-body holds the content.
A heading element of class media-heading holds the heading of the content.

This code demonstrates how media objects can be displayed to the left or right of some content using Bootstrap: 

<div class=“container”>
  <div class=media>
    <div class=media-left>
    <img src=“http://www.sololearn.com/images/fb-story-icon.jpg” width=“40” height=“40” class=media-object>
    </div>
    <div class=media-body>
      <h4 class=media-heading>SoloLearn</h4>
      Let’s Collaborate!
    </div>
  </div>
  <div class=media>
    <div class=media-body>
      <h4 class=media-heading>FreeCodeCamp</h4>
      Let’s Collaborate!
    </div>
    <div class=media-right>
      <img src=“http://avatars3.githubusercontent.com/u/9892522” width=“40” height=“40” class=media-object>
    </div>
  </div>
</div>

 

If content is large, media can be aligned to the top, middle, bottom by using the media-top, media-middle, media-bottom classes respectively.  

NOTE!
Observe differences between the usage of media-left and media-right classes.

BACK NEXT

CLICK ON THE BUTTON BELOW TO RETURN TO THE BOOTSTRAP 3 MAIN COURSE PAGE. 

BOOTSTRAP 3 MAIN COURSE PAGE

 


© License: All Rights Reserved 


CONTACT HOLLA TECH – LEARN SUPPORT