Media List - HTML CSS Bootstrap

HTML CSS examples for Bootstrap:Media

  1. HOME
  2. HTML CSS
  3. Bootstrap
  4. Media

Description

Media List

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
 <head> 
  <meta charset="utf-8"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <title>Example of Bootstrap 3 Media List</title> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

 </head> <!--   w w w .j a  va 2 s.  c  o m-->
 <body> 
  <div> 
   <ul class="media-list"> 
    <li class="media"> 
     <div class="media-left"> 
      <a href="#"> <img src="https://www.java2s.com/style/demo/Firefox.png" class="media-object" alt="Sample Image"> </a> 
     </div> 
     <div class="media-body"> 
      <h4 class="media-heading">Media Heading</h4> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante.</p> 
      <!-- Nested media object --> 
      <div class="media"> 
       <div class="media-left"> 
        <a href="#"> <img src="https://www.java2s.com/style/demo/Firefox.png" class="media-object" alt="Sample Image"> </a> 
       </div> 
       <div class="media-body"> 
        <h4 class="media-heading">Nested Media Heading</h4> 
        <p>Vestibulum quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam at mattis.</p> 
        <!-- Nested media object --> 
        <div class="media"> 
         <div class="media-left"> 
          <a href="#"> <img src="https://www.java2s.com/style/demo/Firefox.png" class="media-object" alt="Sample Image"> </a> 
         </div> 
         <div class="media-body"> 
          <h4 class="media-heading">Nested Media Heading</h4> 
          <p>Amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p> 
         </div> 
        </div> 
       </div> 
      </div> 
      <!-- Nested media object --> 
      <div class="media"> 
       <div class="media-left"> 
        <a href="#"> <img src="https://www.java2s.com/style/demo/Firefox.png" class="media-object" alt="Sample Image"> </a> 
       </div> 
       <div class="media-body"> 
        <h4 class="media-heading">Nested Media Heading</h4> 
        <p>Phasellus vitae suscipit justo. Mauris pharetra feugiat ante id lacinia. Etiam faucibus mauris id tempor egestas. Duis luctus turpis at accumsan tincidunt.</p> 
       </div> 
      </div> 
     </div> </li> 
    <li class="media"> 
     <div class="media-left"> 
      <a href="#"> <img src="https://www.java2s.com/style/demo/Firefox.png" class="media-object" alt="Sample Image"> </a> 
     </div> 
     <div class="media-body"> 
      <h4 class="media-heading">Media Heading</h4> 
      <p>Quisque pharetra velit id velit iaculis pretium. Nullam a justo sed ligula porta semper eu quis enim. Pellentesque pellentesque, metus at facilisis hendrerit, lectus velit.</p> 
     </div> </li> 
   </ul> 
  </div>   
 </body>
</html>

Related Tutorials