Bootstrap Nested Media Lists

First Page
Next Page

Bootstrap Nested Media Lists

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Example</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <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/3.3.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   </head>
   <body>
      <div class = "container">
         <h2>Tutorials</h2>
         <p>The following are the tutorials:</p>
         <hr>
         <ul class="media-list">
            <li class="media">
               <div class="media-left">
                  <a href="bootstrap.jpg">
                     <img src="css3.jpg" class="media-object" style="width:100px">
                  </a>
               </div>
               <div class="media-body">
                  <h4 class="media-heading">Tutorials</h4>
                  <p>We have text tutorials in HTML, HTML5, CSS, CSS3, javascript, PHP, Sql,  etc.</p>
                  <div class="media">
                     <div class="media-left">
                        <a href="bootstrap.jpg">
                           <img src="css3.jpg" class="media-object" style = "width:100px">
                        </a>
                     </div>
                     <div class="media-body">
                        <h4 class="media-heading">Examples Tutorials</h4>We have video tutorials
                        for HTML, HTML5, CSS, CSS3, javascript, PHP, Sql, etc.
                     </div>
                  </div>
               </div>
            </li>
         </ul>
      </div>
   </body>
</html>

Output

First Page
Next Page