Bootstrap Multimedia Objects

In this section, we will discuss multimedia objects in Bootstrap. These abstract object styles are used to suggest various component types (such as blog comments), where we can use a mix of text and images, with images aligned to the left or right. Media objects allow for the combination of multimedia and text with fewer lines of code.

You can set up media objects by adding the following two classes in your HTML tags:

• .media: This class allows the multimedia (images, videos) within the media object to float to the left or right of the content block.

• .media-list: Use this class if you need a list where each item is part of an unordered list. It can be used for comment lists and article lists.

Here is an example of using the .media class for multimedia objects:

<div class="media">
   <a class="pull-left" href="#">
      <img decoding="async" 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 decoding="async" 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 decoding="async" 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>

View Example Online

The above example displays as follows:

Here is an example of using the .media-list class for multimedia objects:

<ul class="media-list">
   <li class="media">

<a class="pull-left" href="#"> <img decoding="async" 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 decoding="async" 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 decoding="async" 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 decoding="async" 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 decoding="async" 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>

View example online

The above example displays the following effect: