Bootstrap Tutorial - Bootstrap Media Objects








Media object is used for creating components that should contain left- or right- aligned media (image, video, or audio) alongside some textual content.

Bootstrap's media object comes in handy to create multiple levels of nested comments using it.

To produce a media object you need to create a div with a class of media. Then you put two necessary components within it: the media itself and the media-body.

The media-body div should have two further components: the title and the textual content.

The title can be given using an h4 element with a media-heading class and the textual content is represented using a p element.





Example

The markup for creating a media object is: 

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head><!--   ww w .j a  v  a2  s  .  com-->
  <body style='margin:30px'>
    <div class="media">
        <a class="pull-left" href="#">
            <img class="media-object" src="http://placehold.it/50x50" alt="">
        </a>
        <div class="media-body">
            <h4 class="media-heading">Awesome piece  of work!</h4>
            <p>Lorem ipsum  dolor  sit amet,  consectetur 
            Lorem ipsum  dolor  sit amet,  consectetur 
            Lorem ipsum  dolor  sit amet,  consectetur 
            Lorem ipsum  dolor  sit amet,  consectetur 
            Lorem ipsum  dolor  sit amet,  consectetur 
            Lorem ipsum  dolor  sit amet,  consectetur 
            Lorem ipsum  dolor  sit amet,  consectetur 
            Lorem ipsum  dolor  sit amet,  consectetur 
            Lorem ipsum  dolor  sit amet,  consectetur 
            Lorem ipsum  dolor  sit amet,  consectetur 
            Lorem ipsum  dolor  sit amet,  consectetur 
            Lorem ipsum  dolor  sit amet,  consectetur 
            Lorem ipsum  dolor  sit amet,  consectetur 
            Lorem ipsum  dolor  sit amet,  consectetur 
            Lorem ipsum  dolor  sit amet,  consectetur 
            Lorem ipsum  dolor  sit amet,  consectetur 
            Lorem ipsum  dolor  sit amet,  consectetur </p>
        </div>
    </div>

  </body>
</html>

Click to view the demo





Example 2

To create a nested comments design, we can place more media object markup inside the media-body div of the previous media object as follows: 

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head><!--from   w w  w .  jav  a2 s .c  o m-->
  <body style='margin:30px'>
    <div class="media">
        <a class="pull-left" href="#">
            <img class="media-object" src="http://placehold.it/50x50" alt="">
        </a>
        <div class="media-body">
            <h4 class="media-heading">Awesome piece  of work!</h4>
            <p>Lorem ipsum  dolor  sit amet,  consectetur ...</p>
            <!-- Second  Media  Object  -->
            <div class="media">
                <a class="pull-left" href="#">
                    <img class="media-object" src="http://placehold.it/50x50" alt="">
                </a>
                <div class="media-body">
                    <h4 class="media-heading">Awesome piece of work!</h4>
                    <p>Lorem ipsum  dolor  sit amet,  consectetur ...</p>
                </div>
            </div>
        </div>
    </div>

  </body>
</html>

Click to view the demo