Bootstrap Media Object

The media object is an image to the left with descriptive content to the right. It allows abstract object styles for creating various components like blog comments, tweets etc. The main purpose of the media object is to provide block of the information related particular media such as images, video or audio. The goal of the media object is to provide some simple markup to the objects. Bootstrap provides two forms to the media object:

  1. .media
  2. .media-list

also read:

The following examples demonstrate use of different techniques used for implementing the media object in Bootstrap. If you have any questions about bootstrap media object, please write it in the comments section.

Bootstrap Default Object

It allows putting media object like image, video or audio to the left and the content area on the right side can contain object which provides information about that particular object in the form of text. To create this form, use the .media class within the div element as shown in the following example:

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Default Media</h2>
<div class="media">
   <a href="#" class="pull-left">
      <img class="media-object" src="http://www.javabeat.net/wp-content/uploads/2014/03/amazing-300x214.jpg"
      alt="amazing" height="100" width="100"></a>
   <div clas="media-body">
      <h4 class="media-heading">Media Heading</h4>
      The Bootstrap is most popular front end framework for creating websites and web applications.
	  Bootstrap is a powerful front end framework which makes faster and easier web development.
	  It is a combination of HTML, CSS, and Javascript code designed to help build user interface components.
	  Bootstrap was also programmed to support both HTML5 and CSS3.
   </div>
</div>
<div class="media">
   <a href="#" class="pull-left">
      <img class="media-object" src="http://www.javabeat.net/wp-content/uploads/2014/03/amazing-300x214.jpg"
      alt="amazing" height="100" width="100"></a>
   <div clas="media-body">
      <h4 class="media-heading">Media Heading</h4>
      The Bootstrap is most popular front end framework for creating websites and web applications.
	  Bootstrap is a powerful front end framework which makes faster and easier web development.
	  It is a combination of HTML, CSS, and Javascript code designed to help build user interface components.
	  Bootstrap was also programmed to support both HTML5 and CSS3.

      <div class="media">
	     <a href="#" class="pull-left">
	        <img class="media-object" src="http://www.javabeat.net/wp-content/uploads/2014/03/amazing-300x214.jpg"
	        alt="amazing" height="100" width="100"></a>
	     <div clas="media-body">
	        <h4 class="media-heading">Media Heading</h4>
	        The Bootstrap is most popular front end framework for creating websites and web applications.
	  	    Bootstrap is a powerful front end framework which makes faster and easier web development.
	  	    It is a combination of HTML, CSS, and Javascript code designed to help build user interface components.
	        Bootstrap was also programmed to support both HTML5 and CSS3.
	        </div>
	     </div>
	  </div>
</div>
</div>
</body>
</html>

Bootstrap Default Media Example

Bootstrap Media List

To give extra markup to the media object where items will be part of an unordered list, then we can make use of .media-list class within the div element as shown in the below example:

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Default Media</h2>
<ul class="media-list">
   <li class="media">
   <a href="#" class="pull-left">
      <img class="media-object" src="http://www.javabeat.net/wp-content/uploads/2014/03/amazing-300x214.jpg"
      alt="amazing" height="100" width="100"></a>
   <div clas="media-body">
      <h4 class="media-heading">My Heading</h4>
      The Bootstrap is most popular front end framework for creating websites and web applications.
	  Bootstrap is a powerful front end framework which makes faster and easier web development.
	  It is a combination of HTML, CSS, and Javascript code designed to help build user interface components.
	  Bootstrap was also programmed to support both HTML5 and CSS3.

      <div class="media">
        <a href="#" class="pull-left">
          <img class="media-object" src="http://www.javabeat.net/wp-content/uploads/2014/03/amazing-300x214.jpg"
          alt="amazing" height="100" width="100"></a>
      <div clas="media-body">
          <h4 class="media-heading">My Heading</h4>
           The Bootstrap is most popular front end framework for creating websites and web applications.
	       Bootstrap is a powerful front end framework which makes faster and easier web development.
	       It is a combination of HTML, CSS, and Javascript code designed to help build user interface components.
	       Bootstrap was also programmed to support both HTML5 and CSS3.

	       <div class="media">
		     <a href="#" class="pull-left">
		        <img class="media-object" src="http://www.javabeat.net/wp-content/uploads/2014/03/amazing-300x214.jpg"
		        alt="amazing" height="100" width="100"></a>
		   <div clas="media-body">
		        <h4 class="media-heading">My Heading</h4>
		        The Bootstrap is most popular front end framework for creating websites and web applications.
		   	    Bootstrap is a powerful front end framework which makes faster and easier web development.
		   	    It is a combination of HTML, CSS, and Javascript code designed to help build user interface components.
		   	    Bootstrap was also programmed to support both HTML5 and CSS3.
		   </div>
		</div>
	</div>
</div>
		    <div class="media">
		   	   <a href="#" class="pull-left">
		   	   <img class="media-object" src="http://www.javabeat.net/wp-content/uploads/2014/03/amazing-300x214.jpg"
		   		alt="amazing" height="100" width="100"></a>
		   	<div clas="media-body">
		   		<h4 class="media-heading">My Heading</h4>
				The Bootstrap is most popular front end framework for creating websites and web applications.
				Bootstrap is a powerful front end framework which makes faster and easier web development.
				It is a combination of HTML, CSS, and Javascript code designed to help build user interface components.
				Bootstrap was also programmed to support both HTML5 and CSS3.
		   </div>
		</div>
	</div>
</li>
<li class="media">
	<a href="#" class="pull-right">
		<img class="media-object" src="http://www.javabeat.net/wp-content/uploads/2014/03/amazing-300x214.jpg"
		alt="amazing" height="100" width="100"></a>
		<div clas="media-body">
		  <h4 class="media-heading">My Heading</h4>
		  The Bootstrap is most popular front end framework for creating websites and web applications.
		  Bootstrap is a powerful front end framework which makes faster and easier web development.
		  It is a combination of HTML, CSS, and Javascript code designed to help build user interface components.
		  Bootstrap was also programmed to support both HTML5 and CSS3.
	   </div>
</li>
</ul>
</div>
</body>
</html>

Bootstrap Media List Example

Comments

comments

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Speak Your Mind

*