Bootstrap 4 Media Objects

Bootstrap 4 offers a media object component that aligns the media objects and the content. The media object is used to create a repetitive and complex component in which media is placed on either side (i.e., either left or right) of the component such as blogs, tweets, comments, etc.

Basic Media Object – The basic media object is used to create a layout that contains media on any one side (either left or right) along with the content.

Steps for creating Media Object

  • Add .media class to the parent element <div>.
  • Add the .media-body class to the child element to add the body.

Note: You need to add margin and padding on your own with the help of spacing utilities.

Example

<!DOCTYPE html>
 <html lang="en">
 <head>
   <title>Bootstrap 4 Media Object Example</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
 </head>
 <body>
 <div class="container mt-3">
   <h2>Media Object</h2><br>
   <div class="media border p-3">
     <img src="profile.png" alt="John Williams" class="mr-3 mt-3 rounded-circle" style="width:60px;">
     <div class="media-body">
       <h4>John Williams <small><i>Posted on June 10, 2020</i></small></h4>
       <p>John is a software engineer. He works in a multinational firm. He is specialize in many fields.</p>      
     </div>
   </div>
 </div>
 </body>
 </html> 

Output

Bootstrap 4 Media Objects

Nested Media Object – Bootstrap 4 also allows you to create a nested media object. The nested media object mans one media object inside the other. The example of the nested media object is comment thread. To create a nested media object,

  • Add a new .media class to the <div> element.
  • Add the .media-body to the child element.

Example

<!DOCTYPE html>
 <html lang="en">
 <head>
   <title>Bootstrap 4 Media Object Example</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
 </head>
 <body>
 <div class="container mt-3">
   <h2>Nested Media Objects</h2>
   <div class="media border p-3">
     <img src="profile1.jpg" alt="John Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;">
     <div class="media-body">
       <h4>John Williams <small><i>Posted on May 22, 2020</i></small></h4>
       <p>John is a software engineer. He works in a multinational firm. He is specialize in many fields.</p>
       <p>He is a very professional engineer and has done so many projects.</p>
       <div class="media p-3">
         <img src="profile1.jpg" alt="Jane Doe" class="mr-3 mt-3 rounded-circle" style="width:45px;">
         <div class="media-body">
           <h4>Jane Williams <small><i>Posted on May 23 2020</i></small></h4>
           <p>John is a software engineer. He works in a multinational firm. He is specialize in many fields.</p>
           <p>He is a very professional engineer and has done so many projects.</p>
         </div>
       </div>  
     </div>
   </div>
 </div>
 </body>
 </html> 

Output

Bootstrap 4 Media Objects

Right-Aligned Media Object – If you want to create a right-aligned media object, add the image using <img> element before the .media-body.

Example

<!DOCTYPE html>
 <html lang="en">
 <head>
   <title>Bootstrap 4 Media Object Example</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
 </head>
 <body>
 <div class="container mt-3">
   <h2>Right Aligned Media Objects</h2><br>
   <div class="media border p-3">
     <div class="media-body">
       <h4>John Williams <small><i>Posted on May 22, 2020</i></small></h4>
       <p>John is a software engineer. He works in a multinational firm. He is specialize in many fields.</p>
       <p>He is a very experienced engineer and has done so many projects.</p>
     </div>
     <img src="profile1.jpg" alt="John Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;">
   </div>
 </div>
 </body>
 </html> 

Output

Bootstrap 4 Media Objects

Top, Middle, and Bottom Alignment – You can place the media object anywhere in the component. To place the media object on the top, bottom and middle, add .align-self-* class to the <img> element.

 Example

<!DOCTYPE html>
 <html lang="en">
 <head>
   <title>Bootstrap 4 Media Object Example</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
 </head>
 <body>
 <div class="container mt-3">
   <h2>Media Object</h2>
   <!-- Media top -->
   <div class="media">
     <img src="download.jpg" class="align-self-start mr-3" style="width:80px">
     <div class="media-body">
       <h5>Media Top</h5>
       <p>The media object is used to create a repetitive and complex component in which media is placed on any one side (either left or right) of the component such as blog, tweets, comments, etc.</p>
       <p>You can place media at the top of the component by adding <strong>.align-self-start</strong> class to the <strong>img</strong> element.</p>
     </div>
   </div>
   <!-- Media middle -->
   <div class="media mt-3">
     <img src="download.jpg" class="align-self-center mr-3" style="width:80px">
     <div class="media-body">
       <h5>Media Middle</h5>
       <p>The media object is used to create a repetitive and complex component in which media is placed on any one side (either left or right) of the component such as blog, tweets, comments, etc.</p>
       <p>You can place media in the ceneter of the component by adding <strong>.align-self-center</strong> class to the <strong>img</strong> element.</p>
     </div>
    </div>
   <!-- Media bottom -->
   <div class="media mt-3">
     <img src="download.jpg" class="align-self-end mr-3" style="width:80px">
     <div class="media-body">
       <h5>Media Bottom</h5>
       <p>The media object is used to create a repetitive and complex component in which media is placed on any one side (either left or right) of the component such as blog, tweets, comments, etc.</p>
       <p>You can place media at the bottom of the component by adding <strong>.align-self-end</strong> class to the <strong>img</strong> element.</p>
     </div>
   </div>
   <br>
   <br>
 </div>
 </body>
 </html> 

Output

Bootstrap 4 Media Objects
Bootstrap 4 Media Objects
Bootstrap 4 Media Objects