Home Whiteboard Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

Add HTML Content to Bootstrap List Group

Bootstrap Web Development CSS Framework

Bootstrap list groups are added using the list-group-item class.

Add HTML content to the linked list groups using the following code

Example

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Example</title>
      <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet">
      <script src = "/scripts/jquery.min.js"></script>
      <script src = "/bootstrap/js/bootstrap.min.js"></script>
   </head>
   <body>
      <div class = "list-group">
         <a href = "#" class = "list-group-item active">
            <h4 class = "list-group-item-heading">
               Tutorials
            </h4>
         </a>
         <a href = "#" class = "list-group-item">
            <h4 class = "list-group-item-heading">
               Programming
            </h4>
            <p class = "list-group-item-text">
               Tutorials on Java, C, C++, etc.
            </p>
         </a>
         <a href = "#" class = "list-group-item">
            <h4 class = "list-group-item-heading">
               Web Development
            </h4>
            <p class = "list-group-item-text">
               Tutorials on PHP, HTML5, etc.
            </p>
         </a>
         <a href = "#" class = "list-group-item">
            <h4 class = "list-group-item-heading">
               Database
            </h4>
            <p class = "list-group-item-text">
               Tutorials on DBMS, MySQL, DB2, etc.
            </p>
         </a>
      </div>
      <div class = "list-group">
         <a href = "#" class = "list-group-item active">
            <h4 class = "list-group-item-heading">
               Quiz
            </h4>
         </a>
         <a href = "#" class="list-group-item">
            <h4 class = "list-group-item-heading">
               CAT
            </h4>
            <p class = "list-group-item-text">
               Quiz for CAT students.
            </p>
         </a>
         <a href = "#" class = "list-group-item">
            <h4 class = "list-group-item-heading">NEET</h4>
            <p class = "list-group-item-text">Quiz for NEET students.</p>
         </a>
      </div>
   </body>
</html>
Updated on: 2020-06-12T20:04:46+05:30

294 Views

Learn More in Our Tutorials

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements