Bootstrap Media Object

Advertisements


This chapter discusses about Media object. These are abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content. The goal of the media object is to make the code for developing these blocks of information drastically shorter.

The goal of media objects (light markup, easy extendability) is achieved by applying classes to some simple markup. There are two forms to the media object:

  • .media: This class allows to float a media object (images, video, audio) to the left or right of a content block.

  • .media-list: If you are preparing a list where the items will be part of an unordered list, use class. Useful for comment threads or articles lists.

Let us see an example below of default media object:

<div class="media">
   <a class="pull-left" href="#">
      <img class="media-object" src="/bootstrap/images/64.jpg" 
      alt="Media Object">
   </a>
   <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      This is some sample text. This is some sample text. 
      This is some sample text. This is some sample text.
      This is some sample text. This is some sample text. 
      This is some sample text. This is some sample text.
   </div>
</div>
<div class="media">
   <a class="pull-left" href="#">
      <img class="media-object" src="/bootstrap/images/64.jpg" 
      alt="Media Object">
   </a>
   <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      This is some sample text. This is some sample text. 
      This is some sample text. This is some sample text.
      This is some sample text. This is some sample text. 
      This is some sample text. This is some sample text.
      <div class="media">
         <a class="pull-left" href="#">
            <img class="media-object" src="/bootstrap/images/64.jpg" 
            alt="Media Object">
         </a>
         <div class="media-body">
            <h4 class="media-heading">Media heading</h4>
            This is some sample text. This is some sample text. 
            This is some sample text. This is some sample text.
            This is some sample text. This is some sample text. 
            This is some sample text. This is some sample text.
         </div>
      </div>
   </div>
</div>
Media Object Demo

Let us see an example below of media list:

<ul class="media-list">
   <li class="media">
      <a class="pull-left" href="#">
         <img class="media-object" src="/bootstrap/images/64.jpg" 
         alt="Generic placeholder image">
      </a>
      <div class="media-body">
         <h4 class="media-heading">Media heading</h4>
         <p>This is some sample text. This is some sample text. 
            This is some sample text. This is some sample text.
            This is some sample text. This is some sample text. 
            This is some sample text. This is some sample text.</p>
         <!-- Nested media object -->
         <div class="media">
            <a class="pull-left" href="#">
               <img class="media-object" src="/bootstrap/images/64.jpg" 
               alt="Generic placeholder image">
            </a>
            <div class="media-body">
               <h4 class="media-heading">Nested media heading</h4>
               This is some sample text. This is some sample text. 
               This is some sample text. This is some sample text.
               This is some sample text. This is some sample text. 
               This is some sample text. This is some sample text.
               <!-- Nested media object -->
               <div class="media">
                  <a class="pull-left" href="#">
                     <img class="media-object" src="/bootstrap/images/64.jpg" 
                     alt="Generic placeholder image">
                  </a>
                  <div class="media-body">
                     <h4 class="media-heading">Nested media heading</h4>
                     This is some sample text. This is some sample text. 
                     This is some sample text. This is some sample text.
                     This is some sample text. This is some sample text. 
                     This is some sample text. This is some sample text.
                  </div>
               </div>
            </div>
         </div>
         <!-- Nested media object -->
         <div class="media">
            <a class="pull-left" href="#">
               <img class="media-object" src="/bootstrap/images/64.jpg" 
               alt="Generic placeholder image">
            </a>
            <div class="media-body">
               <h4 class="media-heading">Nested media heading</h4>
               This is some sample text. This is some sample text. 
               This is some sample text. This is some sample text.
               This is some sample text. This is some sample text. 
               This is some sample text. This is some sample text.
            </div>
         </div>
      </div>
   </li>
   <li class="media">
      <a class="pull-right" href="#">
         <img class="media-object" src="/bootstrap/images/64.jpg" 
         alt="Generic placeholder image">
      </a>
      <div class="media-body">
         <h4 class="media-heading">Media heading</h4>
         This is some sample text. This is some sample text. 
         This is some sample text. This is some sample text.
         This is some sample text. This is some sample text. 
         This is some sample text. This is some sample text.
      </div>
   </li>
</ul>
Media Object List Demo


Advertisements
Advertisements