Home >>Bootstrap Tutorial >Bootstrap Media Objects

Bootstrap Media Objects

Bootstrap Media Objects

Media object are generally used to display blog comments, tweet and so on. Bootstrap provides you some easy way to use media object.

Let's take an example of media object:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap media object</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.4.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>
  <div class="media border p-3">
    <img src="images.png" alt="Kanchan" class="mr-3 mt-3 rounded-circle" style="width:70px;">
    <div class="media-body">
      <h4>Kanchan <small><i>Posted on Nov 19, 2019</i></small></h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>      
    </div>
  </div>
</div>
</body>
</html>
Output:

Media Object

Kanchan

Kanchan Posted on Nov 19, 2019

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Nested Media Objects

If you need you can also Nested a media object inside a media object.

Let's take an example of nested media object:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap media object</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.4.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="media border p-3">
  <img src="images.png" alt="kanchan" class="mr-3 mt-3 rounded-circle" style="width:70px;">
  <div class="media-body">
    <h4>Kanchan <small> <i>Posted on Nov 19, 2019</i></small></h4>
    <p>Lorem ipsum...</p>
    <div class="media p-3">
      <img src="images.png" alt="Anshika" class="mr-3 mt-3 rounded-circle" style="width:55px;">
      <div class="media-body">
        <h4>Anshika <small> <i>Posted on Nov 19, 2019</i></small></h4>
        <p>Lorem ipsum...</p>
      </div>
    </div> 
  </div>
</div>
</body>
</html>
Output:
kanchan

Kanchan Posted on Nov 19, 2019

Lorem ipsum...

Anshika

Anshika Posted on Nov 19, 2019

Lorem ipsum...

Right-Aligned Media Image

You can also right-aligned image by using media object

Let's take an example of right-aligned media:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap media object</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.4.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="media border p-3">
  <div class="media-body">
    <h4>Anshika <small> <i>Posted on Nov 19, 2019</i></small></h4>
    <p>Lorem ipsum...</p>
  </div>
  <img src="images.png" alt="Anshika" class="ml-3 mt-3 rounded-circle" style="width:70px;">
</div>
</body>
</html>
Output:

Anshika Posted on Nov 19, 2019

Lorem ipsum...

Anshika