Home Whiteboard Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

Nested media lists with Bootstrap

Bootstrap Web Development CSS Framework

Use the .media-list property to set nested media lists.

You can try to run the following code to implement .media-list property −

Example

Live Demo

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Bootstrap Example</title>
      <meta charset  ="utf-8">
      <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 = "https://www.tutorialspoint.com/tutorialslibrary.htm">
                     <img src="https://www.tutorialspoint.com/videotutorials/images/tutorial_library_home.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 Python Data Science, Java i18n, GitLab, TestRail, VersionOne, DBUtils, Common CLI, Seaborn, Ansible, LOLCODE, Current Affairs 2018, Apache Commons Collections, etc.</p>
                  <div class = "media">
                     <div class = "media-left">
                        <a href = "https://www.tutorialspoint.com/videotutorials/index.htm">
                           <img src = "https://www.tutorialspoint.com/videotutorials/images/video_tutorials_home.jpg" class = "media-object" style = "width:100px">
                        </a>
                     </div>
                     <div class = "media-body">
                        <h4 class = "media-heading">Video Tutorials</h4>We have video tutorials for WordPress, Photoshop, Magento, Eclipse, NetBeans, Drupal, Joomla, etc.
                     </div>
                  </div>
               </div>
            </li>
         </ul>
      </div>
   </body>
</html>
Updated on: 2020-06-15T07:12:06+05:30

512 Views

Learn More in Our Tutorials

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements