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="https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1" 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

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="https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1" 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="https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1" 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

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="https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1" alt="John Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;">

  </div>

</div>

</body>

</html>

Output

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="https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1" 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="https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1" 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="https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1" 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