Bootstrap Media Object

Bootstrap Media Object

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, easyextendability) 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>

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="#">

                     <imgclass="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>