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