Home >>Bootstrap Tutorial >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 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 Posted on Nov 19, 2019

Lorem ipsum...

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...

« Previous

Bootstrap Tutorial Bootstrap Introduction Bootstrap Example Bootstrap Container Bootstrap Jumbotron Bootstrap Grid System Bootstrap Alerts Bootstrap Typography Bootstrap Table Bootstrap Colors Bootstrap Forms Bootstrap Images Bootstrap Buttons Bootstrap Button Group Bootstrap Progress Bars Bootstrap Badges Bootstrap Pagination Bootstrap Cards Bootstrap Navs Bootstrap Fixed Navigation Bar Bootstrap Navigation Bar Bootstrap Collapse Bootstrap Carousel Bootstrap Modal Bootstrap Input Groups Bootstrap List Groups Bootstrap Tooltip Bootstrap Popover Bootstrap Flex Bootstrap Utilities Bootstrap Media Objects

Bootstrap Interview Questions

No Sidebar ads