Bootstrap Panels

Bootstrap Panels

In this section the panels in bootstrap will be discussed. A panel is a box that has a border and some content. There is padding around the content. A basic panel in bootstrap can be created by using the class .panel with the <div> tag and then by using the class .panel-default.

Panel with Tables:

A table can be added to panel by using the .table class within the panel class. It should be noted here that the borders will not be added to table when the table is added to panel using the class .table. If the .panel-body class is added to the <div> tad, then an extra border for the top of the panel will be required. And if this class is not added to the <div> tag then the components will move from the header of the panel to the table.

Consider the following example in which we have created panel with table:

CODE:

<!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”>

<h3 class = “panel-title”>Heading of Panel</h3>

</div>

<div class = “panel-body”>

A Basic panel

</div>

<table class = “table”>

<tr>

<th>Employee</th>

<th>Salary</th>

</tr>

<tr>

<td>Stuart</td>

<td>24000</td>

</tr>

<tr>

<td>Timothy</td>

<td>44000</td>

</tr>

</table>

</div>

<div class = “panel panel-default”>

<div class = “panel-heading”>Heading of Panel</div>

<table class = “table”>

<tr>

<th>Employee</th>

<th>Salary</th>

</tr>

<tr>

<td>Nicholas</td>

<td>13000</td>

</tr>

<tr>

<td>John</td>

<td>21000</td>

</tr>

</table>

</div>

</body>

</html>

The above code will generate the following result:

OUTPUT:

Panel with List Groups:

List groups can also be added to panels by adding the .panel and .panel-default classes to the <div> tag. Now add list group within this panel.

Consider the following example in which we have created panels with list groups: