Bootstrap Panels

Bootstrap Panels

<div class="panel panel-default"> <div class="panel-body"> This is a Basic panel </div> </div>


Panel with heading

<div class="panel panel-default"> <div class="panel-heading"> Panel heading without title </div> <div class="panel-body"> Panel content </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title"> Panel With title </h3> </div>

Panel with footer

<div class="panel panel-default"> <div class="panel-body"> This is a Basic panel </div> <div class="panel-footer"> Panel footer</div> </div> <div class="panel-body"> Panel content </div> </div>

Panel Contextual alternatives

<div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title"> Panel title</h3> </div> <div class="panel-body"> This is a Basic panel </div> </div> <div class="panel panel-success"> <div class="panel-heading"> <h3 class="panel-title"> Panel title</h3> </div> <div class="panel-body"> This is a Basic panel </div> </div> <div class="panel panel-info"> <div class="panel-heading"> <h3 class="panel-title"> Panel title</h3> </div> <div class="panel-body"> This is a Basic panel </div> </div> <div class="panel panel-warning"> <div class="panel-heading"> <h3 class="panel-title"> Panel title</h3> </div> <div class="panel-body"> This is a Basic panel </div> </div> <div class="panel panel-danger"> <div class="panel-heading"> <h3 class="panel-title"> Panel title</h3> </div> <div class="panel-body"> This is a Basic panel </div> </div>

Panel with tables

<div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title"> Panel title</h3> </div> <div class="panel-body"> This is a Basic panel </div> <table class="table"> <th>Product</th><th>Price </th> <tr><td>Product A</td> <td>200</td> </tr> <tr><td>Product B</td> <td>400</td></tr> </table> </div> <div class="panel panel-default"> <div class="panel-heading"> Panel Heading</div> <table class="table"> <th>Product</th><th>Price </th> <tr><td>Product A</td><td>200</td></tr> <tr><td>Product B</td><td>400</td></tr> </table> </div>

Panel with Listgroups

<div class="panel panel-default"> <div class="panel-heading"> Panel heading</div> <div class="panel-body"> <p> This is a Basic panel content. This is a Basic panel content. This is a Basic panel content. This is a Basic panel content. This is a Basic panel content. This is a Basic panel content. This is a Basic panel content. </p> </div> <ul class="list-group"> <li class="list-group-item">Free Domain Name Registration</li> <li class="list-group-item">Free Window Space hosting</li> <li class="list-group-item">Number of Images</li> <li class="list-group-item">24*7 support</li> <li class="list-group-item">Renewal cost per year</li> </ul> </div>