Bootstrap Panel with List groups



Include list groups within any panel. Create a panel by adding class .panel to the <div> element. Also, add class .panel-default to this element. Now within this panel include your list groups.

You can try to run the following code to set panel with list groups −

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 = "panel panel-default">          <div class = "panel-heading">Panel heading</div>          <div class = "panel-body">             <p>The following is a list of topics in Java.</p>          </div>          <ul class = "list-group">             <li class = "list-group-item">Java Interfaces</li>             <li class = "list-group-item">Java Packages</li>             <li class = "list-group-item">File Handling in Java</li>          </ul>       </div>    </body> </html>
Updated on: 2020-06-12T20:31:32+05:30

599 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements