Bootstrap 4 Media Objects

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

media.PNG

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

media1.PNG

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

media2.PNG

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

media3.1.PNG
media3.2.PNG
media3.3.PNG